Use pseudo elements for hover indicator arrows
.myElement{
/* ( For pseudo-element to display next to element)*/
display: inline-block;
}
.myElement::before {
/* ( for off state)*/
display: none;
/*( pseudo-elements wont show without this)*/
content: '';
/*( w & h are zero to use border thickness for construction )*/
width: 0;
height: 0;
border-left: 10px solid transparent;
border-top: 10px solid red;
border-right: 10px solid transparent;
/*(Pos: Absolute to prevent "hover kick" of shifting inline elements)*/
position: absolute;
top: 0;
left: -10px;
}
.myElement:hover::before{
display: inline-block;
}
Written by Jeff Scott Ward
Related protips
3 Responses
tried copy and paste and took me a few tries to realize the //
comments were breaking the css. Might want to update to /* */
comments for valid css.
Also copied to a demo-able example on jsfiddle
over 1 year ago
·
ahhh, whoops sorry about that. So used to SASS that I forgot real CSS uses /**/. Updated. Hope its working well for you!
over 1 year ago
·
You forgot these styles for .myElement:
position: relative; /* to position pseudo relative to its parent */
overflow: hidden; /* prevent pseudo from sticking out*/
Also, I suggest changing 10px
to something like 0.8em
so it scales appropriately regardless of the actual font-size on element.
jsFiddle
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#