Question

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

如果每个li前面都有一个静态空格字符，我想这可行，但不知道如何实现这一点。代码如下：

＆＃13;

ul{
   list-style:none;
    -webkit-padding-start: 0px;
    }

a:hover::before {
    content:'> ';
}

＆＃13;

<ul>
    <li><a href="#">Journalist</a></li>
    <li><a href="#">Writer</a></li>
    <li><a href="#">Publications designer</a></li>
</ul>

＆＃13;

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

在上述小提琴中，padding-left值应等于left。

为了您的理解，您也可以使用margin-left代替padding-left，也可以申请li

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

1 个答案: