停止`li：hover :: before`移动列表项的文本

Question

我正在尝试为li:hover::before工作获取一些CSS，但不确定要更改哪些属性，以便即使子弹内容发生变化（长度增加），项目文本也不会移动。

在列表项悬停中，我在项目符号content中添加了额外的字符，但我希望字符前缀为现有字符，而不是附加到右侧并移动项目文本。

我不知道应该更改哪些属性以确保文本无论字体大小和字体本身如何都会保持静止。
（例如，转换精确数量的像素并不是解决方案）

我最接近的是使用"\2002\2002\203a"作为非悬停content，但空格的宽度与我使用的字符略有不同，因此仍然会发生变化。

我使用的字符是\203a或›。

理想情况下，我希望在没有任何JavaScript的情况下执行此操作，并且对于IE8和其他人们在当今时代不应该使用的浏览器的向后兼容性并不太感到困扰。

期望的样子：

not hovered:     > Text
hovered        >>> Text

示例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";
    /* ??? */
}

小提琴：

And the obligatory JSFiddle

Answer 1

对CSS的更改：

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

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

JSFiddle

Answer 2

如果您使li具有相对位置，li::before具有绝对位置，并且（最重要的部分）text-align:right;您将获得所需的位置。

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

您可能需要调整定位，但这应该可以帮助您开始。