A CSS pseudo-element is used to style HTML elements. In CSS3, double colon is used to represent pseudo-elements.

first-line Pseudo-element

The ::first-line pseudo-element is used style the first line of a HTML element.

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

::first-letter Pseudo-element

The ::first-letter pseudo-element is used style the first letter of a HTML element.

p::first-letter {
    color: #ff0000;
    font-size: 30px;
}

Example: Download

::before Pseudo-element

The ::before pseudo-element can be used to insert some content before an element.

h1::before {
    content: url(smiley.gif);
}

::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

h1::after {
    content: url(smiley.gif);
}

p{
    font-size:25px;
    counter-increment: count;
	margin:10px;
	padding:10px;
}

p:before
{
    content:counter(count) ". ";
    //content:"Read this - ";
    //content:attr(href);
}

::selection Pseudo-element

The ::selection pseudo-element is use to style the text that is selected by a user.

CSS properties can be applied to ::selection are color, background, cursor, and outline.

::selection {
    color: red; 
    background: yellow;
}