Core points

The
• CSS content attribute is used in conjunction with the ::before and ::after pseudo-elements to insert generated content into a web page. It supports a variety of values ??including normal, counter, attr, strings, open-quote, url, initial, inherit, and
.
• contentattr() Properties can be used to insert values ??of text, encoded characters, media files, and even counters. For example, the
function can be used to insert the value of a specified property.
• open-quoteclose-quote or content values ??use the no-open-quote attribute to generate open or closed quotes. The no-close-quote or
value can be used to remove open or closed quotes from the specified element.
• contentWhile the CSS ::before attribute is mainly used with ::after and ::marker pseudo-elements, it can also be used with
pseudo-elements to customize the appearance of a list bullet or number.

contentIf you are a front-end developer, you're likely to have heard of pseudo-elements and the

contentThis article will focus on the content attributes. The ::before attribute of CSS is used with ::after and

content Basic syntax of attributes

The syntax of the content

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

attr()CSS differs slightly between different values. For example, to use the ::before value with ::after or

p::after {
  content: " (" attr(title) ")";
}

attr()This is just an example and will be introduced in detail later. In the following section, I will discuss each value, including

noneValue: normal or

is set to none, no pseudo-element is generated. If you set it to normal, for the ::before and ::after pseudo-elements, it will be calculated as none.

p::before {
  content: normal;
}

p::after {
  content: none;
}

This method may be used for nested elements that already define pseudo-elements, but you want to override pseudo-elements in some contexts.

Value: <string>

This value sets the content to a string and can be any text content. If non-Latin characters are used, the characters need to be encoded. Let's look at each example. Consider the following HTML:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

Then the following CSS:

p::after {
  content: " (" attr(title) ")";
}

Here, we insert the text content into one of the list items and insert the encoded characters (in this case the copyright symbol) into the paragraph element.

String values ??must be enclosed in quotes, which can be single or double quotes.

Value: <uri>

The <uri> value is very convenient when you are interested in displaying a certain medium, which you can do by pointing to external resources such as images. If the resource or image cannot be displayed for some reason, it is ignored or some placeholder is used instead. Let's look at some code that demonstrates this value.

This is HTML:

p::before {
  content: normal;
}

p::after {
  content: none;
}

This is the CSS that shows the favicon of SitePoint and some text:

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

Value: counter() or counters()

attribute. It is written as one of two different functions—content or counter(). For a more detailed discussion of CSS counters, check out this article. But here is a brief overview. counters()

, the generated text is the value of the innermost counter of the name you specified within this pseudo-element scope. By default, it is formatted in decimal, but can also be formatted in Roman numerals. counter()

is similar, but represents all counters with the specified name (first parameter), in the order from the outermost layer to the innermost layer. All these values ??are separated by the specified string (the second parameter). If you specify the name of the counter variable as counters(name, string), none, or inherit, the declaration will be ignored. initial

.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "<pre class="brush:php;toolbar:false"><code class="html"><a class="sp" href="http://miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>

.sp::before {
  content: url(http://miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}

Value: attr()

function will insert the value of the specified property, which is the only parameter. If the relevant element has no attributes, an empty string is returned. attr()

<h2>Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p>

attribute value in brackets next to the link text: href

.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}

Value: or open-quoteclose-quoteWhen

is set to one of these values, the content attribute generates open or closed quotes. It is usually used with <q> elements, but you can use it with any element. So you can do the following:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

p::after {
  content: " (" attr(title) ")";
}

p::before {
  content: normal;
}

p::after {
  content: none;
}

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>