在 CSS 中显示内容

CSS（层叠样式表）是用于控制网页内容显示的语言。通过 CSS，我们可以设置网页中的文字、图片、背景等的样式和布局。在 CSS 中，我们也可以使用一些属性来直接在网页中显示内容，而不是仅仅控制内容的样式。

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

在 CSS 中，::before 和 ::after 是用来在一个元素之前或之后添加内容（也可以是样式）的伪元素。它们可以通过 content 属性来设置要添加的内容。

下面是一个例子，通过 ::before 在一个 div 元素前添加一条分隔线：

div::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 10px;
}

该代码会在一个 div 元素前添加一条灰色分隔线，高度为 1 像素，距离 div 元素下边缘 10 像素。需要注意的是，content 属性不能为空，上面的例子中我们将其设置为空字符串。

同样的，我们也可以使用 ::after 来在一个元素之后添加内容。

使用 content 属性显示文字

上面的例子中，我们使用了 ::before 和 content 属性添加了一条分隔线，但是 content 属性不仅仅可以用于添加其他元素和样式，还可以直接用于显示文字。

下面是一个例子，通过 ::before 在一个 h1 元素前添加一段标题：

h1::before {
  content: "Chapter 1. ";
  font-size: 18px;
  font-weight: bold;
}

该代码会在一个 h1 元素前添加一个加粗的标题 "Chapter 1. "，字号为 18 像素。

利用 data-* 属性显示数据

除了直接使用 content 属性显示文字和元素外，我们还可以利用 HTML5 中的 data-* 属性来在 CSS 中显示数据，例如数字、字符串等。

下面是一个例子，通过 data-* 属性在一个 div 元素中显示一些数据：

<div data-value="123"></div>

div::after {
  content: attr(data-value);
  font-size: 24px;
  color: red;
}

该代码会在一个 div 元素后显示数字 "123"，字号为 24 像素，颜色为红色。需要注意的是，我们使用了 attr() 函数来获取 data-value 的属性值。

其他注意事项

在使用上面的方法来在 CSS 中显示内容时，需要注意以下几点：

• 以上方法中的 ::before 和 ::after 伪元素只能用于有内容的元素，例如 div、p、h1 等等，对于无内容的元素如 img、input 则无效。
• 在使用 content 属性时，需要将元素的 display 属性设置为 block 或 inline-block，否则 content 属性会无效。
• 在使用 data-* 属性时，需要在 CSS 中使用 attr() 函数来获取属性值。如果使用 data-* 属性显示的是文字，需要注意对内容进行 HTML 转义，以避免 XSS 攻击的风险。
• 在使用 data-* 属性时，需要考虑浏览器兼容性问题。如果需要支持较老的浏览器，可以使用 JavaScript 将数据插入到 HTML 中，然后利用 CSS 控制样式。