CSS TUTORIALS - CSS - Pseudo Elements
CSS - Pseudo Elements
ADVERTISEMENTS
selector:pseudo-element {property: value}
|
ADVERTISEMENTS
selector.class:pseudo-element {property: value}
|
ADVERTISEMENTS
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. |
<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.
|