In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > selectors and pseudos > pseudo elements

Pseudo elements

In the W3C CSS2.1 specification the syntax of pseudo elements and pseudo classes are the same, both starts with a colon (:) followed by the name of the pseudo (see: Pseudo-elements (W3C CSS21)).
In the W3C CSS3 specification the syntax of pseudo elements was changed, a pseudo element starts with two colons (::) followed by the name of the pseudo (see: Pseudo-elements (W3C CSS3)).

Because of that modification, browsers support pseudo elements in different syntaxes. Firefox, Opera, Google Chrome and Safari support pseudo elements with two colons and because of backward compatibility, support almost all pseudo elements with one colon also (except the ::selection). Internet Explorer only supports pseudo elements with one colon.

Unfortunately, the use of unknown pseudo elements cause that the browsers ignore the corresponding style declaration block. So if you want to declare a pseudo element both with one and two colons, you need to duplicate the whole style declaration block. It is conceivable that Firefox, Opera, Google Chrome and Safari will stop supporting pseudo elements with one colon in the future, but nowadays they support them with one colon also (except the ::selection). Therefore it is simpler, if you declare the ::after, ::before, ::first-letter, ::first-line pseudos with one colon and the ::selection pseudo with two colons.

Pseudos:

::after

8

Can be used to specify generated content after an element's content.

::before

8

Can be used to specify generated content before an element's content.

::first-letter

Applies to the first letter of an element.

::first-line

Applies to the first line of an element.

::selection

Applies to the content that is currently selected or highlighted text by the user.

Pseudo elements:

::after

8

Can be used to specify generated content after an element's content.

Note: The ::after pseudo element is supported in Firefox, Opera, Google Chrome and Safari both with one and two colons while in Internet Explorer only with one colon.
Note: The :after pseudo element is supported in Internet Explorer from version 8.

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:after {
            content: " " counter(chapter) ".";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

::before

8

Can be used to specify generated content before an element's content.

Note: The ::before pseudo element is supported in Firefox, Opera, Google Chrome and Safari both with one and two colons while in Internet Explorer only with one colon.
Note: The :before pseudo element is supported in Internet Explorer from version 8.

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

::first-letter

Applies to the first letter of an element. Can be used as an Initial which is a letter at the beginning of a work that is larger than the rest of the text.

The ::first-letter pseudo can only be used on block-level elements, or elements with a correspoding 'display:block' style property.

Note: The ::first-letter pseudo element is supported in Firefox, Opera, Google Chrome and Safari both with one and two colons while in Internet Explorer only with one colon.

<head>
    <style>
        #paragraph:first-letter {
            color:red;
            font-size:23px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p id="paragraph">
        Look at the first letter!
    </p>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

address, blockQuote, body, center, dd, dir, div, dl, dt, fieldSet, form, H1, H2, H3, H4, H5, H6, html, isIndex, legend, li, listing, marquee, menu, ol, p, plainText, pre, table, textArea, ul, xmp

::first-line

Applies to the first line of an element.

The ::first-line pseudo can only be used on block-level elements, or elements with correspoding 'display:block' style property.

Note: The ::first-line pseudo element is supported in Firefox, Opera, Google Chrome and Safari both with one and two colons while in Internet Explorer only with one colon.

<head>
    <style>
        div:first-line {
            color:red;
            font-size:23px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div>
        First line.<br>
        Second line.<br>
        Third line.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

address, blockQuote, body, center, dd, dir, div, dl, dt, fieldSet, form, H1, H2, H3, H4, H5, H6, html, isIndex, legend, li, listing, marquee, menu, ol, p, plainText, pre, table, textArea, ul, xmp

::selection

Applies to the content that is currently selected or highlighted text by the user.

Note: The support for the ::selection pseudo element with one colon has been removed in Opera 10 and Safari 4.

<head>
    <style>
        ::selection {
            color:red;
        }
    </style>
</head>
<body>
    Select all or a portion of this text!
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, marquee, menu, ol, p, plainText, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Uli Schumacher

:after & :before on replaced elements

:after and :before do not work on any socalled "replaced elements", i.e. <input> and <img> (except in Opera).
This is due to the way browsers construct these elements in the DOM...

Marques Johansson

Form Elements and pseudo-classes

I've noticed that :after does not work on INPUT elements in any IE, Firefox, or Chrome. It does work in Opera.

Pseudo elements

Pseudos:

Pseudo elements:

::after

Supported by tags:

::before

Supported by tags:

::first-letter

Supported by tags:

::first-line

Supported by tags:

::selection

Supported by tags:

Post Content