html - 在悬停时添加字符而不移动文本

Question

尝试在悬停时添加字符，但我想在字符出现时不将文本向右移动。

如果每个 li 前面都有一个静态空格字符，我想这会起作用，但不确定如何实现这一点。代码如下:

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/

Answer 1

试试这个:

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

在上面的 fiddle 中，padding-left值应该等于left。

仅供您理解，您还可以使用 margin-left 代替 padding-left，也可以应用于 li