The official home of the Python Programming Language: CSS Pseudo Elements

CSS Pseudo Elements

CSS pseudo-elements are used to add special effects to some selectors. You do not need to useJavascript or any other script to use those effects. A simple syntax of pseudo-element is as follows:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element{property: value}

There are following most commonly used pseudo-elements:

Value

Description

:first-line

Use this element to add special styles to the first line of the text in a selector.

:first-letter

Use this element to add special style to the first letter of the text in a selector.

:before

Use this element to insert some content before an element.

:after

Use this element to insert some content after an element.

The :first-line pseudo-element

Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document .

p:first-line { text-decoration: underline; }

p.noline:first-line { text-decoration: none; }

</style>

<p class="noline"> This line would not have any underline

because this belongs to nline class.</p>

<p>The first line of this paragraph will be underlined

as defined in the CSS rule above. Rest of the lines in this

paragraph will remain normal. This example shows how to use

:first-line pseduo element to give effect to the first line

of any HTML element.</p>

This will produce following black link:

This line would not have any underline because this belongs to nline class.

The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first lines of any HTML element.

The :first-letter pseudo-element

Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document .

p:first-letter { font-size: 3em;text-color:red; }

p.normal:first-letter { font-size: 10px; }

</style>

<p class="normal"> First character of this paragraph will

be normal and will have font size 10px;</p>

<p>The first character of this paragraph will be 3em big

and in red color as defined in the CSS rule above. Rest of the

characters in this paragraph will remain normal. This example

shows how to use :first-letter pseduoelement to give effect to

the first characters of any HTML element.</p>

This will produce following black link:

First character of this paragraph will be normal and will have font size 10 px;

The first character of this paragraph will be 3em big and in red color as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.

The :before pseudo-element

Following is the example which demonstrates how to use :before element to add some content before any element .

p:before

{

content: url(/images/bullet.gif)

}

</style>

<p> This line will be preceded by a bullet.</p>

This will produce following black link:

This line will be preceded by a bullet.

The :after pseudo-element

Following is the example which demonstrates how to use :after element to add some content after any element .

p:after

{

content: url(/images/bullet.gif)

}

</style>

<p> This line will be succeeded by a bullet.</p>

This will produce following black link:

This line will be succeeded by a bullet.

The official home of the Python Programming Language

CSS Pseudo Elements

ليست هناك تعليقات:

إرسال تعليق