html - 列表项下的元素符号

Question

正如您在图片中看到的，列表项“时尚”前面有一个元素符号，这仅在悬停状态下显示。我的目标是将元素符号放在列表项下。

这是我现在的 CSS:

.top-menu-left ul li a:hover:before
{
  content: "\2022";
  color: inherit;
  padding-right: 4px;
  position: relative;
  top: 1px;
}

有人可以帮我吗？

Answer 1

因此，我对您的代码做了一些更改，应该可以解决您的问题:

• 增加子弹与顶部的距离
• 通过 left: 50% 和 translateX(-50%)
居中
• 将元素符号设置为绝对位置，并将其父级 li 设置为相对位置，否则只要将鼠标悬停在它上面，您的链接就会稍微向右移动(并且居中它会稍微多一点困难)

您可以查看下面的代码片段以查看最终结果:

.top-menu-left ul {
  list-style: none;
}

.top-menu-left ul li {
  display: inline-block;
  position: relative;
}

.top-menu-left ul li + li {
  margin-left: 25px;
}

.top-menu-left ul li a:hover:before {
  content: "\2022";
  position: absolute;
  top: 1em;
  left: 50%;
  translate: translateX(-50%);
}

<div class="top-menu-left">
  <ul>
    <li><a>FASHION</a></li>
    <li><a>TRAVEL</a></li>
  </ul>
</div>

---

编辑:

由于您试图将元素符号放在列表项之后，您应该改为使用after 伪元素(感谢@ErickPetrucelli)。

如果你愿意，你仍然可以通过right(而不是left)和translateX定位它，或者如果你不想为此，您可以改为采用以下方法:

.top-menu-left ul li a:hover:after {
  [...]
  display: block;
  width: 100%;
  text-align: center;
}

这两种技术之间只有一个细微差别:通过 left: 0 或 right: 0 和 translateX(-50%) 定位它code> 将只占用子弹所需的空间(左图)，通过 display: block 和 text-align: center 将其居中将区域拉伸(stretch)到一个完整的 block (右图)

---

结论:

考虑到您可能只会显示上述元素符号，使用哪种方法并不重要。
但是假设您想在链接下方显示一些文本，那么 display: block 方法可能会更好地为您服务，因为它允许文本很好地环绕(右图)，而与前一种方法，文本不会居中并且会溢出(左图)。