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> <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>