将内容添加到长文本 CSS

当我们需要在长文本中添加特定样式，最好的选择是使用 CSS。在这篇文章中，我们将介绍如何使用 CSS 将内容添加到长文本中。

使用 ::before 和 ::after 伪元素

我们可以使用 ::before 和 ::after 伪元素向长文本中添加内容。这两个伪元素可以用来在一个元素之前或之后插入新的内容。

## CSS 代码

```css
p::before {
  content: "★";
}

输出结果

<p>★ This is a paragraph.</p>

在上面的例子中，我们使用 ::before 伪元素向 <p> 元素前面添加了一个星号。使用 ::after 伪元素时，只需要将伪元素的名称改为 ::after 即可。

使用 content 属性

我们可以使用 content 属性来添加文本、图像或其他内容。content 属性仅在伪元素（::before 和 ::after）中生效。

## CSS 代码

```css
p::before {
  content: "Chapter " counter(chapter) ". ";
  counter-increment: chapter;
}

输出结果

<p>Chapter 1. This is the first chapter.</p>
<p>Chapter 2. This is the second chapter.</p>
<p>Chapter 3. This is the third chapter.</p>

在上面的例子中，我们使用了 content 属性来添加章节编号。counter-increment 属性用于增加计数器的值。

使用 attr() 函数

attr() 函数可以用来获取元素的属性值，并将其插入到文档中。这个函数通常用在 ::before 和 ::after 伪元素中。

## CSS 代码

```css
a::after {
  content: " (" attr(href) ")";
}

输出结果

<a href="http://www.example.com">Link</a>

在上面的例子中，我们使用了 attr() 函数将链接的 URL 插入到链接后面。

使用 data-* 属性

我们还可以使用 data-* 属性来存储自定义数据。这些数据可以用在::before 和 ::after 伪元素中，以及在 JavaScript 代码中。

## HTML 代码

```html
<p data-text="This is a custom text.">This is a paragraph.</p>

## CSS 代码

```css
p::before {
  content: attr(data-text);
}

输出结果

<p data-text="This is a custom text.">This is a paragraph.</p>

在上面的例子中，我们使用了 data-* 属性来存储自定义文本，然后使用 attr() 函数将其插入到了 ::before 伪元素中。

总之，我们可以使用以上方法将特定样式添加到长文本中，使文本更具有吸引力和可读性。