使用 :after CSS 伪元素而不插入内容答案

【问题标题】：Using the :after CSS pseudo-element without inserting content使用 :after CSS 伪元素而不插入内容
【发布时间】：2014-11-06 11:28:17
【问题描述】：

是否可以使用:after CSS 伪元素来偏移对齐，而无需在content: "" 中实际插入任何内容。除非指定内容，否则它似乎不会呈现，所以只是想知道这是否可能或是否有任何已知的解决方法。

举个例子：-

.nav-primary li.level0 a:after {
    content: "";
    padding-right: 1px;
    margin-left: -1px;
}

从示例中可以看出，在这种情况下，简单地更改内容的颜色是行不通的，因为仍然会占用影响偏移的空间。

【问题讨论】：

【解决方案1】：

可以使用:after 伪元素，并将content property 设置为空字符串""，但不能不设置所有内容（因此它具有初始值none，这意味着根本没有生成伪元素）。

您看不到任何效果的原因是您的设置有效地相互抵消了。您设置了一个负的左边距，将元素向左移动，但您设置了等量的填充。伪元素本身是空的，因此是不可见的，所以重要的是它占据的空间。

这可以通过绘制轮廓来说明。为了清楚起见，我使用值 10px 而不是 1px：

.nav-primary li.level0 a:after {
    content: "";
    padding-right: 10px;
    margin-left: -10px;
    outline: solid red;
}

<div class=nav-primary>
  <ul>
     <li class=level0><a href=foo>bar</a>xxx
     <li><a href=foo>bar</a>xxx
  </ul>
</div>

【讨论】：

【解决方案2】：

我遇到了类似的情况，通过将 display: block 添加到 :before 样式来解决。

【讨论】：

【解决方案3】：

据我所知有可能使用带有空白内容的 CSS 伪元素。需要指定属性内容，但可以留空（如您在示例代码中所做的那样）。

我认为您的问题可能与显示模式有关 - 默认情况下伪元素为 inline。如果我很了解您要达到的目标，我会这样做：

【讨论】：