Question

我希望使用:hover but向Pseudo元素添加一个小圆圈，我想要的结果是圆圈显示::before而不移动文本本身。我希望最终将此方法应用于导航栏使用图像。

这是我的HTML示例：

<div class="bla">
  <p><a class="circle">Hello Circle</a></p>
</div>

这是我的CSS示例：

.bla {
left: 300px;
position: relative;

}

.circle:hover::before{
content: "";
height: 20px;
width: 20px;
background-color:#D13335;
border-radius: 50%;
webkit-border-radius: 50%;
display: inline-block;
margin-right: 10px;
float: left;

}

Answer 1

您可以为圈子使用绝对定位：

.circle:hover::before{
content: "";
height: 20px;
width: 20px;
background-color:#D13335;
border-radius: 50%;
webkit-border-radius: 50%;
position:absolute;
left:-20px;

}

演示：http://jsfiddle.net/U5H3y/

Answer 2

您可以使用position: absolute; left: -20px来阻止文字移动。的 Demo

left: -20px只是匹配圆的宽度，所以如果你想给它一些更多的空间，你可以增加它。使用position: absolute;将其从流中取出，因此不会推/拉文本。

伪元素：悬停在::之前

2 个答案: