在来自属性的内容之前 - CSS

在 HTML 和 CSS 中，“来自属性”的概念是一个重要的设计模式。它允许开发者添加内容或样式到一个元素的指定位置，这个位置可以是文字、图像或其他 HTML 元素。

在某些情况下，开发者可能需要在来自属性的内容之前添加样式或内容。这可以通过 CSS 中的 ::before 伪元素来实现。

::before 伪元素

::before 伪元素允许开发者在元素内容的前面添加其他内容或样式。它是通过 CSS 中的 content 属性来实现的。

下面展示了一个例子，在一个段落的内容前添加一个“警告”图标：

p::before {
  content: url("warning.png");
  padding: 0 10px;
}

这些代码会将 “warning.png” 图片添加到 <p> 元素内容的前面，并添加一些内边距。注意，::before 伪元素的样式必须在 content 属性之后定义。

content 属性

content 属性是 ::before 和 ::after 伪元素的关键属性。它定义了要添加到元素内容前面或后面的内容或样式。

content 属性可以接受各种类型的值，如文字、图像、计数器或其他 HTML 元素。下面是一些示例：

p::before {
  content: "警告";
}

p::before {
  content: counter(section) ". ";
  counter-increment: section;
}

p::before {
  content: "";
  display: ball;
  background-color: red;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

这些代码会在 <p> 元素内容前添加一个“警告”文本、章节计数器和红色球。

总结

通过使用 ::before 伪元素和 content 属性，开发者可以在元素内容之前添加样式或内容。这是一个强大的设计模式，为开发者提供了更大的灵活性和控制能力。