Last Updated: February 25, 2016
·
4.082K
· jeffscottward

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;
}

3 Responses
Add your response

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 ·