X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

CSS Pseudo-elements


CSS pseudo-elements are used to add special effects to some selectors.


Syntax

The syntax of pseudo-elements:

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

CSS classes can also be used with pseudo-elements:

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


The ::first-line Pseudo-element

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

The ::first-line pseudo-element can only be applied to block-level elements.

Example

Format the first line of the text in p elements:

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

Try it yourself »

The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The ::first-letter Pseudo-element

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

The ::first-letter pseudo-element can only be applied to block-level elements. 

Example

Format the first letter of the text in p elements: 

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

Try it yourself »

The following properties apply to the ::first-letter pseudo- element: 

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes: 

CSS:

p.article::first-letter {color:#ff0000;}

HTML:

<p class="article">A paragraph in an article</p>

The example above will display the first letter of all paragraphs with class="article", in red.


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: 

Example

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

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

Try it yourself »


CSS - The ::before Pseudo-element

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:

Example

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

Try it yourself »


CSS - The ::after Pseudo-element

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:

Example

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

Try it yourself »


All CSS Pseudo Classes/Elements

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
::before p::before Insert content before every <p> element
::after p::after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook