Fandom

HTML & CSS Wiki

Pseudo-Elements

649pages on
this wiki
Add New Page
Comments0 Share

CSS pseudo-elements are used to add special effects to some CSS selectors. Pseudo-elements have a colon (:) in front of their name.

The following is the syntax used to write pseudo-elements:

selector:pseudo-element {
                         property:value;
}

A class selector may also be used:

selector.class:pseudo-element {
                               property:value;
}

:first-line

The :first-line pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a <p> element according to the style in the :first-line pseudo-element (where the browser breaks the line, depends on the size of the browser window):

p:first-line {
              color:#ff0000;
              font-variant:small-caps;
}

This pseudo-element only works with block-level elements. The following are properties that apply to this pseudo-element:

:first-letter

The :first-letter pseudo-element is used to add a special style to the first letter of a text:

p:first-letter {
                color:#ff0000;
                font-size:xx-large;
}

This pseudo-element can only be used with block-level elements. The following properties apply to this pseudo-element:

Pseudo-elements used with class selectors

Pseudo-elements can be combined with CSS class selectors:

p.article:first-letter {
                        color:#ff0000;
}
<p class="article">A paragraph in an article with the first letter red.</p>

Multiple pseudo-elements

Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color.

p:first-letter {
                color:#ff0000;
                font-size:xx-large;
}

p:first-line {
              color:#0000ff;
              font-variant:small-caps;
}

:before

The :before pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each <h1> element:

h1:before {
           content:url(smiley.gif);
}

:after

The :after pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each <h1> element:

h1:after {
          content:url(smiley.gif);
}

Pseudo-elements

Below is a chart which lists the pseudo-elements:

Pseudo-element Description
:after Adds content after an element.
:before Adds content before an element.
:first-letter Adds a style to the first character of text.
:first-line Adds a style to the first line of text.

See Also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.