html - 如何在CSS或CSS中将 anchor 跨度文本显示在 anchor 之前

我有一个垂直导航菜单，其中包含正常的ul，li，布局，但在锚定文本范围内具有跨度。锚点是一个白色的点，在悬停时会增加大小，并处于活动状态。文本显示在悬停状态和活动状态。

<li>
    <a href="#" class="active"><span>Home</span></a>
</li>

菜单在屏幕的右侧。如何使文本显示在点之前并垂直对齐。

最佳答案

我可以建议在伪元素后添加：after。

<h1>Hello World!</h1>

<ul style="list-style: none;">
  <li><a href="#" class="active circle"><span>Home</span></a></li>
</ul>

.circle::after {
  content: '';
  background-color:black;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
}

.circle:hover:after {
  content: '';
  background-color:blue;
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
}

这是CodePen中的代码

关于html - 如何在CSS或CSS中将 anchor 跨度文本显示在 anchor 之前，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48948083/