Understanding the CSS 'content' Property

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

properties of CSS. This article won’t go into the deep dive on pseudo-elements, but if you’re not familiar with the concept or need a quick review, it’s recommended that you check out Louis Lazaris’s article on Smashing Magazine.

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

pseudo-elements (can be used with single colon or double colon syntax). This property is used to insert generated content into a web page and is fully supported in all major browsers.

content Basic syntax of attributes

The syntax of the content

attribute is as follows, which contains each value:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

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

, you need to write a CSS like this:

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

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

When

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.

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

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></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:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

Then the following CSS:

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

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></uri>

The <uri></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:

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

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

<code class="language-html"><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></code>

Value: counter() or counters()

This value is the most complex value that can be used with the

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()

For the first function

, 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()

Another function

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

The following is an example of how to use a counter:

<code class="language-css">.new::after {
  content: " New!";
  color: green;
}

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

a9 "; }This is CSS:

<code class="language-css">.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}</code>

This will number the items using the generated content, similar to an ordered list. In this case, we can easily use ordered lists. These types of counters are much more convenient when the items to be numbered are scattered between other elements.

Value: attr()

As mentioned earlier, the

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()

This is an example:

<code class="language-html"><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></code>

Using the above HTML, the following CSS will display the

attribute value in brackets next to the link text: href

<code class="language-css">.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}</code>

This trick is often used in print style sheets to allow links to be displayed in printed web pages.

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></q> elements, but you can use it with any element. So you can do the following:

<code class="language-css">p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}</code>

The

close-quote value only applies to the ::after pseudo-element (the reason is obvious), and if you use the ::before and there is no open-quote value on the same element, it will not produce anything.

Value: no-open-quote or no-close-quote The

value will remove the open quotes from the specified element, and the no-open-quote value will remove the closed quotes. You may be wondering how these values ​​can be useful. View the following HTML: no-close-quote

<code class="language-css">p::after {
  content: " (" attr(title) ")";
}</code>

Note that in the previous paragraph, the speaker quotes someone ("a wise man..."), and this person in turn quotes someone else ("those say..."). Therefore, our quotes are nested in three layers. Syntactically, there is a correct way to deal with this problem. If using the generated content, here are the ways we can ensure that the quotes are nested correctly:

<code class="language-css">p::before {
  content: normal;
}

p::after {
  content: none;
}</code>

The first selector uses the

property to define the type of quotes we want to use, with a depth of three layers. Then we insert quotes as content using pseudo-elements. This is similar to what we did in the previous section. quotes

But what if for some reason we want to ignore the second layer of quotes without inserting them? We can override them using

and no-open-quote values: no-close-quote

<code class="language-html"><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></code>

In this case, I added a class called

to the second layer of quotes. This ensures that the quote nesting is still recognized, but the quotes for the element do not appear. Therefore, the third layer of quotes in this paragraph will have double curly braces instead of single curly braces. noquotes

Conclusion

I hope this tutorial helps you better understand each value of the

property and how to use them in various scenarios. content

FAQ (FAQ) About CSS Content Attributes

What are CSS content properties and how to use it?

CSS

Properties are a powerful tool that allows you to insert generated content into the layout of your page. It is usually used with content and ::before pseudo-elements, adding decorative content via CSS instead of including it in HTML. For example, you can use the ::after attribute to insert quotes around the block reference, or add a decorative image before the title. content The value of the attribute can be a string, a URL, a counter, or even the value of the attribute. content

CSS content attributes can be used with elements other than ::before and ::after?

CSS content attributes are mainly used with ::before and ::after pseudo-elements. However, it can also be used with the ::marker pseudo-element, which represents the tag box for the list item. This allows you to customize the appearance of a list bullet or number.

How to use CSS content attributes to display attribute values?

CSS content properties can be displayed using the attr() function. For example, you can use it to display the value of the link's href property so that the user can see the actual URL. The syntax will be content: attr(href).

Can I insert images using the CSS content properties?

Yes, the CSS content property can be inserted into an image using the url() function. The image will be inserted where the ::before or ::after pseudo-element is placed. For example, content: url(image.jpg) will insert an image named image.jpg.

How to use counters with CSS content properties?

The

CSS content property can be displayed using the counter() or counters() functions. This is useful for automatically numbering titles or sections in a document. You first create or reset the counter using the counter-reset property and increment it using the counter-increment property. You can then use content: counter(myCounter) to display the current value of the counter.

Can I use special characters in CSS content properties?

Yes, you can use special characters in the CSS content attribute by using their Unicode. For example, content: “22” will insert a bullet. Remember to always start with a backslash () Unicode.

Does CSS content attributes affect SEO?

Content added via CSS is generally considered decorative, not content that should be indexed by search engines. Therefore, it is best to use the CSS content attribute for decorative content rather than what is important to SEO.

Can I insert HTML using the CSS content attribute?

No, CSS content attribute cannot be used to insert HTML. It can only insert text, images, counters, and attribute values. If you need to insert HTML, you should do this directly in the HTML document or use JavaScript.

Does CSS content attributes be supported by all browsers?

CSS contentAll modern browsers, including Chrome, Firefox, Safari, and Edge, support the CSS

attributes widely. However, it may not be fully supported in older versions of Internet Explorer.

Can I animate CSS content properties?

No, CSS content attribute cannot be animation. This is because it is not a property with a range of values, but rather a specific value is set. If you need to create an animation, consider using other CSS properties that can be animated, such as opacity or transform.

The above is the detailed content of Understanding the CSS 'content' Property. For more information, please follow other related articles on the PHP Chinese website!