使用项目符号作为装饰创建无序列表，同时悬停

Question

我想创建一个无序列表，可以在每个链接下显示一个项目符号，如附加图像

有人可以推荐一些东西来实现这个目标吗？

Answer 1

您可以使用ul从list-style: none移除默认项目符号，然后使用:after伪元素创建自定义项目符号。

＆＃13;

＆＃13;

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}
li {
  position: relative;
  font-family: sans-serif;
  transition: all 0.3s ease-in;
  font-weight: bold;
}
li:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease-in;
}
li:hover:after {
  opacity: 1;
  background: #682E73;
}
li:hover {
  color: #682E73;
}

＆＃13;

<ul>
  <li>LOREM</li>
  <li>LOREM</li>
  <li>LOREM</li>
  <li>LOREM</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果有人想知道如何使用100％不透明度的子弹来保持实际页面处于活动状态，这是额外的代码

HTML

<ul>
    <li class="active">link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
</ul>

在CSS中

li.active:after {
content: '';
width: 7px;
height: 7px;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
background: #682E73;
color: #682E73;
border-radius: 50%;
opacity: 1;
}