#content

Defines the text content of the :before and :after pseudo-elements.

默认属性 content: normal;

No content is added to the element.

content: "Foo bar";

Considering this HTML element:

<p class="element">
  Hello world
</p>

And this CSS:

.element:before {
  content: "Foo bar";
}

The text content will be prepended to the element's content.

Notice how the end result combines text from the HTML and text from the CSS.

content: url(/images/jt.png);

You can insert images by using the url() function.

content: attr(data-something);

Considering this HTML element:

<p class="element" data-something="cssreference">
  Hello world
</p>

And this CSS:

.element:before {
  content: attr(data-something);
}

The element will grab the text content from the HTML attribute.