CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

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
::firsr-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.

<style type="text/css">
    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>

Run it...   »

Example Result: