Understanding the CSS ‘content’ Property

If you are a front-end developer there is a good chance that you have heard about pseudo-elements as well as CSS’s content property. I won’t discuss pseudo-elements in depth here, but I suggest you take a look at this Louis Lazaris’ article on Smashing Magazine if you are unfamiliar with the concept or need a quick refresher.

In this article, we’ll focus on the content property. CSS’s content property works with the ::before and ::after pseudo-elements (which can use either single- or double-colon synax). The property is used to insert generated content in a web page and it is fully supported in all major browsers.

Basic Syntax for the content Property

The syntax for the content property is broken down as follows, with each of the values represented:

[code language="css"] content: normal|counter|attr|string|open-quote|url|initial|inherit; [/code]

The CSS differs slightly from value to value. For example, to use the attr() value with ::before or ::after, you need to write CSS like the following:

[code language="css"] p::after { content: " (" attr(title) ")"; } [/code]

That’s just one example, and more on that later. In the following sections I will discuss each value, including attr().

Value: none or normal

When set to none, the pseudo-element is not generated. If you set it to normal it computes to none for the ::before and ::after pseudo-elements.

[code language="css"] p::before { content: normal; } p::after { content: none; } [/code]

This kind of thing might be used in nested elements that already have a pseudo-element defined but you want to override the pseudo-element in certain contexts.

Value: <string>

This value sets the content to a string and can be any text content. If using non-latin characters, the characters need to be encoded. Let’s look at examples of each. Consider the following HTML:

[code language="css"]

Tutorial Categories

1. HTML and CSS
2. Sass & Less
3. JavaScript

SitePoint, 2015

[/code]

And then the following CSS:

[code language="css"] .new::after { content: " New!"; color: green; } .copyright::before { content: "\00a9 "; } [/code]

Here we are inserting text content into one of the list items, and also inserting an encoded character (in this case, the copyright symbol) into the paragraph element.

See the Pen Content Property with Text by SitePoint (@SitePoint) on CodePen.

A string value must have quotes surrounding it and these can be either single or double quotes.

Value: <uri>

The <uri> value comes in handy when you are interested in displaying some sort of media, which you can do by pointing to an external resource (for instance an image). If for some reason the resource or image can’t be displayed, it is either ignored or some placeholder takes its place. Let’s look at some code that demonstrates the use of this value.

Here is the HTML:

[code language="css"] SitePoint [/code]

And this is the CSS to show SitePoint’s favicon along with some text:

[code language="css"] .sp::before { content: url(http://ift.tt/1nWd7e4); } [/code]

See the Pen Content Property with url() by SitePoint (@SitePoint) on CodePen.

Value: counter() or counters()

This value is the most complex value that can be used with the content property. It is written as one of two different functions — counter() or counters(). For a more thorough discussion of CSS counters, check out this article. But here is a brief overview.

Continue reading %Understanding the CSS ‘content’ Property%

by Gajendar Singh via SitePoint