伪元素换行(插入换行符)

起因,再写一个页面的时候伪元素里的文字需要换行,’+<br>+’ 无效,想想也对,我在css里怎么可以拼接呢,在百度上没找到“伪元素换行 ”的文章,也许是我的思路有问题。。

事实上在Unicode中有一个转义字符是等同于换行的:

0x000A

在CSS中,可以写成

"\000A"

或更简单的

"\A"

这样插入进去后以后不会有效果;还记得如果在HTML代码中添加换行符会发生什么吗?默认情况下,它们会随着我们空白的多余部分塌下去。这通常是一个很棒的事情,否则我们就需要把我们的整个HTML页面设置格式为一行了!但是,有时候我们想要保留空格和换行,如在代码块中。记得在这种情况下我们通常是怎么做的吗?应用white-space: pre;。这里同样适用,仅应用它来产生换行符。

.box::before{
    white-space: pre;
    content: '\A';
}

最后的效果:

代码;

效果;

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注