I do not understand where the x icon is defined in the following HTML and Sass. I had expected something like an fa unicode, e.g. content: "\f00d"
, but content is empty as seen below. Where does the icon that you can see in the image after the username come from?
.logout
padding: 0 12px
position: relative
a
position: absolute
height: 50px
width: 20px
top: -16px
left: 0
cursor: pointer
padding: 0
&:before,
&:after
width: 2px
height: 12px
left: 10px
top: 50%
margin-top: -6px
content: ""
position: absolute
background-color: #AAAAAA
&:before
-ms-transform: rotate(-45deg)
-webkit-transform: rotate(-45deg)
transform: rotate(-45deg)
&:after
-ms-transform: rotate(45deg)
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
&:hover
&:before,
&:after
background-color: #111111
<nav >
<ul >
<li>other items...</li>
<li>
<span>
<span>User: Pao</span>
<span >
<a href="/logout"></a>
</span>
</span>
</li>
<li>other items...</li>
</ul>
</nav>
CodePudding user response:
Yes. As @BehRouz mentioned,
&:before,
&:after
width: 2px
height: 12px
left: 10px
top: 50%
margin-top: -6px
content: ""
position: absolute
background-color: #AAAAAA
&:before
-ms-transform: rotate(-45deg)
-webkit-transform: rotate(-45deg)
transform: rotate(-45deg)
&:after
-ms-transform: rotate(45deg)
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
This code refers to the close button. Please inspect the X icon and you will see the above code on the right side of the inspect tool.