使用:after CSS伪元素后不插入内容

Question

是否可以使用:afterCSS伪元素来偏移对齐而不实际插入任何内容content: "".除非指定了内容,否则它似乎不呈现,因此只是想知道这是否可行或是否有任何已知的解决方法.

举个例子:-

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

正如您从示例中看到的那样,简单地更改内容的颜色在此实例中将不起作用,因为仍然会消耗影响偏移的空间.

Answer 1

可以使用属性设置为空字符串的:after伪元素,但不能将其全部设置(因此它具有初始值,这意味着根本不生成伪元素).content""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>

Answer 2

我遇到了类似的情况，通过添加样式解决了这个display: block问题:before。