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.


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  


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

<!DOCTYPE html>
  <title>CSS Pseudo Element Selector</title>
        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;
  <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>

Run it...   »