Question

在对我网站上的组件进行样式设计时，我发现在span内h2内添加空格会影响span:after在after中的绝对位置奇怪的方式。我用作边框的<h2> <span>A test</span>  </h2> <h2> <span>A test </span>  </h2>元素。边框在没有空格的内容之后定位，但在有空格时将其自身定位在内容上。 You can see an example here

有关为什么会有不同呈现方式的任何想法？

HTML：

h2 {
  position:relative;
  height:1.625em/1;
}
h2 span {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
  display: inline-block;
  1.625em/1 'MuseoSlab300','Times New Roman',serif;
}
span:after {
  content: "";
    border-bottom: 5px solid #7c61a0;
    position: absolute;
    bottom: 5px;
    margin-left: 8px;
    width: 100%;
}

的CSS：

awk -F'[: ]+' '$1=="Pages" {print $2}'

Answer 1

我认为这两种情况（尾随空间与非空格）之间的主要区别在于浏览器通常会在空白处包含内容（如果需要）。所以在第一种情况下（带有尾随空格），浏览器别无选择，只能推出该范围的宽度，因为:after伪元素无法包装。在第二种情况下，浏览器使用伪元素上的position:absolute声明作为保留原始跨度宽度的键，并且在伪元素之前有空白，然后浏览器可以包装伪 - 元素到下一行。即使伪元素的宽度设置为10px而不是100％的小宽度，您也会看到这种效果。

由于在Firefox与Chrome中的显示方式不同，我不确定哪一个实际上是按照标准行事，或者是否甚至指定了这种情况。

跨度末端的空白影响后伪元素的绝对定位

1 个答案: