Question

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

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

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

Answer 1

我可以建议：伪元素之后。

<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

中的代码

Answer 2

您无法修改无序列表的项目符号样式，我建议先禁用该样式并使用伪元素创建一个新样式。

＆＃13;

ul>li{
  text-align:right;
  margin-right:15px;
  list-style:none;
  
}
ul>li:before{
   content:'\2022';
   margin:0 10px;
}

＆＃13;

<ul>
 <li><a><span>1</span></a></li>
 <li><a><span>1</span></a></li>
 <li><a><span>1</span></a></li>
</ul>

＆＃13;

如何在css或scss中的锚点之前显示锚点范围文本

2 个答案: