CSS pseudo elements
With CSS pseudo elements, you can add special effects to some elements, just as with pseudo classes.
This lesson 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.
</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 will be blue.
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: 20pt;} --> </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 20 points in size.
