CODEWITHSUNDEEP
htmlcss
indivisible
indivisible

Reputation: 5012

Stopping `li:hover::before` moving list item's text

I am trying to get some CSS for li:hover::before working but not really sure which properties to change so that the item text does not move even though the bullet content changes (increases in length).

On list item hover I am adding extra characters to the bullet's content but I want the characters to prefix the existing one instead of appending to the right and moving the item text.

I have no idea which properties I should be changing to ensure that the text will stay stationary regardless of font size and font itself.
(e.g. transforming an exact number of pixels left isn't much of a solution)

The closest I got was using "\2002\2002\203a" for the non-hover content but the spaces are a slightly different width than the char I'm using so there is still shifting happening.

The character I'm using is \203a or ›.

I'd ideally like to do this without any JavaScript and am not really too bothered about backwards compatibility with IE8 and other browsers that people shouldn't be using in this day and age.

Desired look:

not hovered:     > Text
hovered        >>> Text

example html:

<ul>
    <li><a href="/">item 1</a></li>
    <li><a href="/">item 2</a></li>
    <li><a href="/">item 3</a></li>
</ul>

css

ul {
    list-style: none;
    text-align: left;
    padding-left: 2.5em;
}
li {
    padding-left: 1.2em;
    text-indent: -1em;
    font-size: 1.2em;
}
li::before {
      content: "\203a";
      padding-right: 0.3em;
}
li:hover::before {
    content: "\203a\203a\203a";
    /* ??? */
}

fiddle:

And the obligatory JSFiddle

Upvotes: 0

Views: 851

Answers (2)

Aylen
Aylen

Reputation: 3554

Changes to the CSS:

li {
    padding-left: 1.5em;
    position: relative;
}

li::before {
   position: absolute;
   text-align: right;
   left: 0;
}

JSFiddle.

Upvotes: 2

Lochlan
Lochlan

Reputation: 2796

If you make li have a relative position, li::before have an absolute position and (the most important part) text-align:right; you'll get what you need.

http://jsfiddle.net/p7y6Z/6/

You may want to adjust positioning, but this should get you started.

Upvotes: 1

Related Questions