尝试在悬停时添加字符,但我想在字符出现时不将文本向右移动。
如果每个 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>
最佳答案
试试这个:
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
关于html - 在悬停时添加字符而不移动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26685904/