Menu

CSS TUTORIALS - CSS - Pseudo Elements

CSS - Pseudo Elements

ADVERTISEMENTS


selector:pseudo-element {property: value}

ADVERTISEMENTS


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

ADVERTISEMENTS

ValueDescription
:first-lineUse this element to add special styles to the first line of the text in a selector.
:first-letterUse this element to add special style to the first letter of the text in a selector.
:beforeUse this element to insert some content before an element.
:after Use this element to insert some content after an element.


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


<style type="text/css">
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 10 px;</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 pseduo element to give effect to
the first characters  of any HTML element.</p>

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.


<style type="text/css">
p:before
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>

This line will be preceded by a bullet.

This line will be preceded by a bullet.

This line will be preceded by a bullet.


<style type="text/css">
p:after
{
content: url(/images/bullet.gif)
}
</style>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.

This line will be succeeded by a bullet.