【问题标题】: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;
}

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

【问题讨论】:

  • 否;内容为必填项。

标签: css pseudo-element


【解决方案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。如果我很了解您要达到的目标,我会这样做:

      • 将显示模式设置为inline-block
      • 指定偏移对齐的具体尺寸(宽度、高度)。

      JSFiddle

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-12-17
        • 1970-01-01
        • 2021-06-27
        • 1970-01-01
        • 2023-03-15
        相关资源
        最近更新 更多