Pseudo-elements

These are selectors that go beyond what is specified in the document. The selectors select things that may not even be elements in the document. Pseudo-elements are not considered part of a simple selector. This means that you cannot use a pseudo-element as part of the :not() selector. Finally, only one pseudo-element can be present per selector.

Note

Note that all of the pseudo-elements start with a double colon (::). This was introduced in CSS3 to help differentiate between pseudo-classes that have a single colon (:). This is important because in CSS2, pseudo-elements only had the single colon. For the most part, you should use the double colon.

::before and ::after

These are used to insert generated content before or after the selected element:

::before
::after e

Description

This will insert content into the document based on the selector. Whether the content is placed before or after the element targeted depends on the pseudo-element used. Refer to the Generated content section to see what you can insert.

Here is an example that uses both ::before and ::after. This will create a turkey sandwich. Here is the HTML.

<p class="sandwich">Turkey</p>

Here is the CSS that will put a slice of bread before and after the turkey:

p.sandwich::before, p.sandwich::after 
{ content: ":Slice of Bread:"; }

See also

Generated content

::first-letter

This targets the first letter of an element:

::first-letter

Description

This will select the first letter of an element as long as it does not have any other content before it, for example an img element before a character would make ::first-letter not select the first character. Any punctuation that either precedes or follows the first letter would be included with the first letter. This will select any character, including not just letters but also numbers.

This only applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.

Note

The ::first-letter pseudo-element will only match if the first letter is on the first formatted line. If there is a line break before the first letter appears, it will not be selected.

Here is an example, which will not select the first letter:

<p><br />First letter</p>

Here is the CSS:

p::first-letter { font-size: 2em; }

Here is an example:

<p>This is a long line of text that may or may not be broken up across lines.</p>

Here is the CSS. The T in This will be two times the font size of all the other characters:

p::first-letter { font-size: 2em; }

::first-line

The ::first-line attribute targets the first line of an element:

::first-line

Description

This will target the first formatted line of a block-like container such as a block box, inline-block, table-caption, or table-cell.

Here is an example, with the following HTML:

<p>This is a long line of text that may or may not be broken up across lines based on the width of the page and the width of the element it is in.</p>
<p>This is the entire first line.</p>

Here is the CSS. This will make the first line, whatever it may be, red:

p::first-line { color: #ff0000; }

::selection

This targets text highlighted by the user:

::selection

Description

This pseudo-element allows you to style any text that is highlighted by the user. This pseudo-element does not exist in CSS3, but it is part of the next version. Most browsers will still honor this pseudo-element.

Here is an example:

<p>Highlight this to text.</p>

Here is the CSS. When the text is selected, the text will be white on a red background:

::selection { color: #ffffff; background: #ff0000; }