css内容字符-A比br标记占用更多空间

Question

我使用字符A（或）换行标记br 添加换行字符

但是我看到，当我使用css内容字符-A时，它比br标记占用更多的高度。

Jsfidle在，http://jsfiddle.net/6Lkxr2x6/

br标签和A不是代表一个换行符吗？

Answer 1

但是我发现，当我使用css内容字符-\A时，它会占用更多高度超过br标记。

它的高度不会超过br标签。不同之处在于，在示例中的下一个div中，第一个br引入了换行符，然后第二个引入了另一个换行符。

它的渲染图如下：

将有两条新行[br导致此处换行][br导致此处换行]

而在第一个div中，伪元素本身从下一行开始，然后显示两个换行符。这是因为您的#charPrint::after设置为display: block。这将导致它从下一行开始创建自己的块。然后，它将根据其content属性显示两个换行符。

它的渲染图如下：

这是印刷品[伪元素从这里开始][\A导致这里换行][\A导致此处换行]

这就是为什么您在第一个div中看到额外的中断。

要解决这个问题，只需使::after伪元素inline而不是block，这将使其呈现为：

这是一个\a打印内容[伪元素从这里开始][\a导致这里换行][\A导致此处换行]

Fiddle：http://jsfiddle.net/6Lkxr2x6/1/

代码段：

#charPrint::after{ content: 'AA'; display: inline; white-space: pre; }

<div id="charPrint">this is a A print stuff</div>
<div id="other">Two new lines gonna be there
  <br><br>
</div>
<div> end of content</div>

Answer 2

如果您希望A的行为类似于<br>标记，则需要将其设置为。。。

#example {
    display:inline;
}
#example:after {
    content:"a";
    white-space: pre;
}

这个StackOver流问题中的更多细节。

Answer 3

#charPrint::after{
  content: 'AA';
  white-space: pre;
  display: block; /* THIS LINE */
}

您正在添加一个带有2个换行符的新块。第一个换行符已经在新行上了，所以你得到了两个空行。

<br><br>

这里没有特殊的块，第一个换行符在文本行的末尾，第二个换行符是独立的。只有一行空行。

<小时>

在第一个示例中，您需要删除display:block：http://jsfiddle.net/6Lkxr2x6/2/

Answer 4

它的工作原理如下：

h4 {
    display:inline;
}
h4:after {
    content:"a";
    white-space: pre;
}

只需使用jsfiddle进行检查：检查一次