html - 如何在链接下加点

Question

很简单的问题，我想在链接下添加一个点...我该怎么做？我认为它会与 css 一起使用。

例如； Click

Answer 1

我使用了一个 after 伪元素并将它定位在相对于包含元素的位置。

li {
  list-style-type: none;
  display: inline-block;
  padding: 0 1rem;
  position: relative;
}

li.active::after {
  content: "•";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

<ul>
  <li>About</li>
  <li class="active">Files</li>
  <li>Chat</li>
</ul>