伪元素的中心元素

Question

我有一个导航栏，在下面的文字中我使用:after添加了一条细线 我希望该行位于li标记的中间。

ul {
  background: black;
}

ul li {
  display: inline-block;
  padding: 20px 10px;
  cursor: pointer;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li:hover {
  background: #5249FF;
}

ul li:after {
  content: '';
  width: 10px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 15px;
}

<ul>
  <li>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

我希望每个li标签的中心都有白色细线 任何帮助都会很棒 谢谢。

Answer 1

我想你想要喜欢这个

ul {
  background: black;
}

ul li {
  display: inline-block;
  padding: 20px 10px;
  cursor: pointer;
  position: relative;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li:hover {
  background: #5249FF;
}

ul li::after {
  background: #fff;
  bottom: 10px;
  content: "";
  height: 3px;
  left: 0;
  margin: auto;
  position: absolute;
  right:0;
  width: 10px;
}

<ul>
  <li>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

Answer 2

至position: absolute;相对于其父级的内容 - 您需要position父母 我们将position:relative;用于a元素：

body{background:#444;}

ul {
  background: black;
  padding: 0;
}

ul li {
  display: inline-block;
  cursor: pointer;
  /*padding: 20px 10px;*/
}

ul li a {
  position:relative;  /* add */
  display: block;     /* add */
  padding: 20px 10px; /* add */
  text-decoration: none;
  color: #FFFFFF;
}

ul li a:hover {       /* anchor hover! */
  background: #5249FF;
}

ul li a:after {       /* anchor after! */
  content: '';
  width: 10px;
  height: 3px;
  background: #fff;
  position: absolute;
  /*top: 20%; 20% of what*/
  top: 40px;
  /*left: 15px; 15px is not centering*/
  left: 0; 
  right: 0;
  margin: 0 auto /* center */
}

<ul>
  <li>
    <a href="#">HOME</a>
  </li>
  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>
</ul>

不要在LI元素上使用填充 - 考虑可访问性，而是将填充设置为Anchor元素，这样就可以扩展它们的可点击大小。

Answer 3

position:absolute元素相对于第一个position:relative父级是“绝对的”，在您的示例中，没有relative parent，因此它们与body相关。

您需要做的是将position:relative添加到li元素。

Answer 4

您需要在left: 50%; transform:translateX(-50%);内使用ul li:after position:relative;内ul li

＆＃13;

＆＃13;

ul {
  background: black;
}

ul li {
  display: inline-block;
  padding: 20px 10px;
  cursor: pointer;
  position:relative;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
}

ul li:hover {
  background: #5249FF;
}

ul li:after {
  content: '';
  width: 10px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 50%;
  transform:translateX(-50%);
}

＆＃13;

<ul>
  <li>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;