移动添加了伪元素的内容：after

Question

在此先感谢您的帮助！我用这段代码创建了一个菜单：

<div class="img-nav">
        <ul>
            <li>
                <a href="#">places</a>
            </li>
            <li>
                <a href="#">people</a>
            </li>
            <li>
                <a href="#">abstract</a>
            </li>
            <li>
                <a href="#">funny</a>
            </li>
        </ul>
    </div>

然后我在每个菜单项后添加了一个“/”符号：

.img-nav li:after {
    content: " / ";
}

.img-nav li:last-child:after {
    content: " ";
}

问题是，如果我为我的项目添加边距，“/”不会像这样居中：

ITEM1/  ITEM2/  ITEM3/  ITEM4

如何重新定位或移动“/”使其再次居中？谢谢大家！

Answer 1

您可以为 :after 伪选择器添加相等的边距，使其看起来相等。

.img-nav li {
    display: inline;
    margin-left:5px;
}

.img-nav li:after {
    content: " / ";
    margin-left: 5px;
}

.img-nav li:last-child:after {
    content: " ";
}

这是我的jsfiddle

希望对您有所帮助。

Answer 2

在伪元素上使用填充。

ul {
  text-align: center;
}
.img-nav ul li {
  display: inline-block;
}
.img-nav li:after {
  content: " / ";
  margin: 0 1em;
  display: inline-block;
}
.img-nav li:last-child:after {
  content: " ";
}

<div class="img-nav">
  <ul>
    <li>
      <a href="#">places</a>
    </li>
    <li>
      <a href="#">people</a>
    </li>
    <li>
      <a href="#">abstract</a>
    </li>
    <li>
      <a href="#">funny</a>
    </li>
  </ul>
</div>

移动添加了伪元素的内容：after

Move content added with pseudo-element:after

html

css

pseudo-element