Latest web development tutorials

CSS pseudo-elements

CSS pseudo-element is used to add some special effects selectors.

grammar

Pseudo-element syntax:

selector:pseudo-element {property:value;}

CSS classes can also use pseudo-elements:

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

: First-line pseudo-element

"First-line" pseudo-element is used to set up a special style to the first line of text.

In the following example, the browser will be based on "first-line" pseudo-element in the style of the first line of text elements p format:

Examples

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

try it"

Note: "first-line" pseudo-element can only be used for block-level elements.

NOTE: The following properties can be applied 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

: First-letter pseudo-element

"First-letter" pseudo-element is used to set up a special style to the first letter of the text:

Examples

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

try it"

Note: "first-letter" pseudo-element can only be used for block-level elements.

NOTE: The following properties can be applied 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:

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

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

The above example will make all class as the first letter of the paragraph article turns red.

Multiple Pseudo-elements

A plurality of pseudo-elements can be combined to use.

In the following example, the first paragraph of the letter will be displayed in red, the font size is xx-large. The first line of the rest of the text will be blue, and small capital letters.

The remaining paragraphs of text in the default font size and color to display:

Examples

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

try it"

CSS -: before pseudo-element

": Before" pseudo-element can insert new content in front of the content of the element.

The following example to insert a picture in front of each <h1> element:

Examples

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

try it"

CSS -: after pseudo-element

": After" pseudo-element can insert new content after the content of the element.

The following examples insert a picture after each <h1> element:

Examples

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

try it"

All CSS pseudo-classes / elements

Selector Example Example shows
: link a:link Select all unvisited links
: visited a:visited Select all visited links
: active a:active Select is an active link
: hover a:hover Put the mouse on the link status
: focus input:focus After selecting the input element has focus
: first-letter p:first-letter Select the first letter of each <p> element
: first-line p:first-line Select the first line of each <p> element
: first-child p:first-child <] P> element selector matches any element belonging to the first child element
: before p:before Insert content before each <p> element
: after p:after Insert content after each <p> element
: lang (language) p:lang(it) lang attribute selection <p> element to a start value