CSS - Pseudo Elements
CSS - Pseudo Elements
The CSS pseudo-elements are mainly used to give special effects to a particular line, character, before and after of a HTML element.
Syntax:
Selector: pseudo-element {property: value} The following pseudo-elements are commonly used,
First-line: It is used to insert some style into first line of the text specified in the selector. For example, p:first-line {text-decoration: underline; }
First-letter: It is used to insert some style into first letter of the text specified in the selector. For example, p:first-letter{ font-size: 7 em;}
Before: It is used to insert some content like image before a HTML element. For example, p:before { content: url (image_path)}
After: It is used to insert some content like image after a HTML element. For example, p:after { content: url (image_path)}
Example :
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p:before {
content: url(img.jpg)
}
h3:first-letter { font-size: 5em; }
h3:after {
content: url(img.jpg)
}
</style>
</head>
<body>
<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 as well as: before-image pseudo element to give effect.
</p>
<h3>
This is testing for first letter of font-size, 5em.along with after image testing effect.
</h3>
</body>
</html>
Output:
