W e b t u t o r i a l s

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

CSS Tooltip

CSS Hover Effect

CSS3 Pseudo element

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