CSS pseudo elements
With CSS pseudo elements, you can add special effects to some elements, just as with pseudo classes.
This tutorial focuses on:
- Using pseudo elements
- Using pseudo elements with classes
Using pseudo elements
You can use a pseudo element by referencing it by name.
Syntax:
selector:pseudo-element {property: value}
Example:
<html>
<head>
<title>Pseudo elements</title>
<style type="text/css">
p:first-line {color: blue;}
</style>
</head>
<body>
<p>
The first line of this paragraph will be blue as specified
by the "first-line" pseudo element. The other text in this
paragraph will not be blue.
</p>
</body>
</html>
Output:
Using pseudo elements with classes
You can use pseudo elements with classes.
Syntax:
selector.class:pseudo-element {property: value}
Example:
<html>
<head>
<title>Pseudo elements with classes</title>
<style type="text/css">
p.one:first-line {color: blue;}
p.two:first-letter {font-size: 34px;}
</style>
</head>
<body>
<p class="one">
This is a paragraph. This is the second sentence of the
paragraph. This is the third sentence of the paragraph.
This is the fourth sentence of the paragraph.
</p>
<p class="two">
This is a paragraph. This is the second sentence of the
paragraph. This is the third sentence of the paragraph.
This is the fourth sentence of the paragraph.
</p>
</body>
</html>
Output:
In the above example, the pseudo-element "first-line" is used to specify that the first line of text declared with the <p> tag that is part of the "one" class will be blue. The pseudo-element "first-letter" is used to specify that the first letter of text declared with the <p> tag that is part of the "two" class will be 34 pixels in size.
