伪元素:悬停在::之前

我希望使用:hover but我想要的结果为Pseudo元素添加一个小圆圈,以便在::before不移动文本本身的情况下显示圆圈.我希望最终将此方法应用于导航栏使用图像.

这是我的HTML示例:

  
Hello Circle

这是我的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;

}

Yuriy Galant.. 5

您可以对圆圈使用绝对定位:

.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/