WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Pseudo-elements


What are Pseudo-Elements?

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

Syntax

Pseudo-element syntax:

selector:pseudo-element {property:value;}
CSS classes can also use pseudo-elements:
selector.class:pseudo-element {property:value;}

The : first-line pseudo-element

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

In the following example, the browser formats the first line of text of the p element according to the style in the "first-line" pseudo-element:

Example 

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

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

Note: The following attributes 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


    The : first-letter pseudo-element

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

    Example

    p:first-letter { color:#ff0000; font-size:xx-large; }
    Try it yourself »

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

    Note: The following attributes 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:  

    Example

    p.article:first-letter {color:#ff0000;} <p class="article">Article paragraph</p>
    Try it yourself »

    The above example will make the first letter of all paragraphs with class article red.


    Multiple Pseudo-elements

    Can be used in combination with multiple pseudo-elements.

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

    The rest of the text in the paragraph will be displayed in 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-: before pseudo-element

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

    The following example inserts an image before each <h1> element:

    Example

    h1:before { content:url(smiley.gif); }
    Try it yourself »

    CSS-: after pseudo-element

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

    The following example inserts an image after each <h1>element:

    Example

    h1:after { content:url(smiley.gif); }
    Try it yourself »

    All CSS Pseudo Elements

    There are five pseudo components in CSS, each beginning with a twofold colon (::):

    Selector Example Example description
    :after p:after Insert content after each <p> element
    :before p::before Insert content before each <p> element
    :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
    :selection p:selection Selects the segment of a component that is chosen by a user