Question

I have a menu on a web page and I want to add some emphais onto the element that my mouse is hovering over.
Before I hover my mouse the menu looks good and the alignment looks good. To add emphsis, I added a small arrow (or ‘>’ sign). The problem is that now the text jumps to the right by 2 characters.

I want to add the ‘>’ character without my menu text jumping the right. The correct behavior is that the text remains in p
lace and the arrow appears 2 spaces to the left of the hovered menu item.

Note I tried to change my alignment and the whole thing looks like crap. Only text-align: left gives it the correct alignment.

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400
  font-size:0.5em;
}

#leftMenu a:hover:before {
  content: "> ";
}

How can I add the arrow without the text jumping to the right?

Answer 1

Just have the “>” already exist, just not visible. This way it will take up the real estate on the menu, so nothing will move when it appears. Here is a small example:

CSS:

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400;
  font-size:0.5em;
}

.marker{
  visibility:hidden;
}

#leftMenu li:hover .marker{
  visibility:visible;
}

#leftMenu ul{
  list-style:none;
}

HTML:

<div id="leftMenu">
  <ul>
     <li><span class="marker">&gt;</span><a href="#">Link 1</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 2</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 3</a></li>
  </ul>
</div>

I’m not really sure of the exact layout of your menu, but I think the above gets across the general idea.