CSS Pseudo Elements Selector

CSS Pseudo elements selectors define abstract elements in a HTML. Pseudo elements identify by "double colon" (::) with the name of pseudo element.

Pseudo elements provide a mechanisms to access element first-line, first-letter content.

CSS define ::first-line, ::first-letter, ::before and ::after pseudo element.

Syntax

You can define selector with the name of pseudo element, syntax is like

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

You can also define selector with "dot" (.) class name with the name of pseudo class, syntax is like

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

CSS Pseudo-element Selector

Pseudo Class	Example	Description	CSS
::after	p::after	Add the content of the end of <p> element	2
::before	p::before	Add the content of the beginning of <p> element	2
::first-letter	p::first-letter	Select the first letter of <p> element	2
::first-line	p::first-line	Select the first line of <p> element	2
::selection	p::selection	Select the <p> element when user select paragraph text

Example

This example cover CSS pseudo element ::first-line, ::first-letter, ::before, ::after and ::selection.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Pseudo Element Selector</title>
  <style>
    p.one::after{
        content: " - After word";
        color: #FF0000;
    }
    p.one::before {
        content: "Before word - ";
        color: #FF0000;
    }
    p.two::first-letter {
        font-size: 30px;
    }
    p.two::first-line {
        color: #FF0000;
    }
    p::selection { 
        color: #00000;  
        background-color: #66cbff; 
    }
    p::-moz-selection { 
        color: #00000;   
        background-color: #66cbff;
    }
  </style>
</head>
<body>
  <p class="one">This is paragraph line.</p>

  <p class="two">This example cover CSS pseudo elements like after, before, first-line, first-letter, selection.</p>
</body>
</html>

Run it... »