列表项下的项目符号

Question

正如您在图片中看到的那样，列表项目前面有一个子弹＆＃34; Fashion＆＃34;，这仅在悬停状态下显示。我的目标是将子弹放在列表项下。

这是我现在的CSS：

Image 1 => 300x250
Image 2 => 300x600
Image 3 => Taboola
Image 4 => /* Nothing */

有人可以帮我吗？

Answer 1

因此，我对您的代码进行了一些更改，以解决您的问题：

• 增加子弹从顶部的距离
• 通过uuid和left: 50%
进行居中
• 将项目符号设置为绝对位置，将父项translateX(-50%)设置为相对位置，否则只要您将鼠标悬停在其上，您的链接就会略微向右移动（并且还会使其居中更加困难）< / LI>

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

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>伪元素（感谢@ErickPetrucelli）。

如果您愿意，您仍然可以通过after（而不是right）和left来定位，或者如果您不想这样做，您可以改为以下方法：

translateX

这两种技术之间只有一个细微差别：通过.top-menu-left ul li a:hover:after { [...] display: block; width: 100%; text-align: center; } 或left: 0和right: 0进行定位只会占用子弹所需的空间（左图），居中它通过translateX(-50%)和display: block将区域拉伸到一个完整的区域（右图）。

结论：

考虑到您可能只展示上述子弹，使用哪种方法无关紧要 但是让我们说你想在链接上显示一些文字，然后text-align: center方法可能会更好地为你服务，因为它允许文本很好地包装（右图），就像前一种方法一样，文本不会居中并且会溢出（左图）。

Answer 2

我建议只生成子弹:after锚定内容（而不是:before），让display: block和text-align: center为您解决问题。我还删除了ul li以更清楚，并更好地证明解决方案是a本身。

.top-menu-left {
  display: flex;
}
.top-menu-left a {
  color: #111;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.top-menu-left a:hover {
  color: #666;
}
.top-menu-left a:hover:after {
  content: '\2022';
  color: inherit;
  display: block;
  position: relative;
  top: -4px;
}

<nav class="top-menu-left">
  <a href="#fashion">Fashion</a>
  <a href="#travel">Travel</a>
</nav>

但是，如果您真的想用列表项构建HTML：

.top-menu-left ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-menu-left a {
  display: block;
  color: #111;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.top-menu-left a:hover {
  color: #666;
}
.top-menu-left a:hover:after {
  content: '\2022';
  color: inherit;
  display: block;
  position: relative;
  top: -4px;
}

<nav class="top-menu-left">
  <ul>
    <li><a href="#fashion">Fashion</a></li>
    <li><a href="#travel">Travel</a></li>
  </ul>
</nav>