Content 属性 in CSS - 如何将内容分成几个段落

Question

我有一段文本在我网站的几个子页面上重复出现。由于我不时重写它并且不使用 db，所以我决定在我的 css 文件中通过伪元素（之前，之后）定义它。

问题是 - 此文本应分为 2 段，我不知道如何在 css 中的内容属性中包含换行符。找到了一些答案，但无论我使用什么 (\a, \A, \n) 都没有用。不能使用 "white-space:pre"，因为我不知道那些换行符在哪里 - 我想做的就是在 Contect 中再添加一个换行符。

为了更好的理解，这就是我想要达到的效果

这就是我想做的在 css:

.gettomestia:before { content:"How to get to Mestia: "; font-weight:bold; }

.gettomestia:after { content:"longer text in 2 paragraphs"; display:inline-block; }

并且在 aspx 文件中只需添加带有 class = "gettomestia"

的跨度

我知道，这很草率，但我不知道更好的方法。有人知道如何将该换行符输入到 "after" 伪元素的内容中吗？谢谢。

Answer 1

试试这个...

p:before { 
 content: attr(data-paragraph1) '[=10=]000A' attr(data-paragraph2);
  display: block;
  white-space:pre;
}

<p data-paragraph1="This is paragraph 1" data-paragraph2="This is paragraph 2">This is simple paragraph</p>

Content 属性 in CSS - 如何将内容分成几个段落

Content property in CSS - how to put content into several paragraphs

css

pseudo-element