CODEWITHSUNDEEP
htmlcssmenuhover
Tan Kucukhas
Tan Kucukhas

Reputation: 827

adding character on hover without moving text

Trying to add a character on hover, but I would like to do it without moving the text to right when the character appears.

If there would be a one static space character in front of each li I guess that would work but not sure how to accomplish this. The code is below:

ul{
   list-style:none;
    -webkit-padding-start: 0px;
    }

a:hover::before {
    content:'> ';
}
<ul>
    <li><a href="#">Journalist</a></li>
    <li><a href="#">Writer</a></li>
    <li><a href="#">Publications designer</a></li>
</ul>

http://jsfiddle.net/Tankucukhas/bobqowde/1/

Upvotes: 2

Views: 2744

Answers (1)

Mr_Green
Mr_Green

Reputation: 41840

Try this:

ul {
    list-style:none;
    -webkit-padding-start: 0px;
    padding-left: 20px;    /* some value to give space for special letter */
}
a {
    position: relative;
}
a:hover::before {
    content:'> ';
    position: absolute;
    left: -20px;   /* equal to padding-left */
}

Working Fiddle

In the above fiddle, padding-left value should be equal to left.

Just for your understanding, you can also use margin-left instead of padding-left and also can apply to li

Upvotes: 5

Related Questions