Pseudo elements
Pseudo elements are used to apply styles to a specific part of an element.
| Pseudo elements | Explanation |
|---|---|
| first-line | applies style to the first line of a block-level element |
| first-letter | applies style to the first letter of a block-level element |
| before | generates content before an element |
| after | generates content after an element |
The before and after pseudo elements are used with the content property.
Syntax
There is a colon between the selector and the pseudo element.
Selector:Pseudo-element { Property: Value }
For example :
p:first-line { color: red }
Pseudo elements can also be used with classes.
Selector.Normal-class:Pseudo-element { Property: Value }
For example :
p.example:first-line { color: red }
The first-line pseudo element
The first-line pseudo element apply style to the first line of a block-level element.
p:first-line { color: red }
In the above example, the style is applied to the first line of the P element.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p { width: 40%; }
p:first-line { color: red; }
</style>
</head>
<body>
<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>
</body>
</html>
The first-letter pseudo element
The first-letter pseudo element apply style to the first letter of a block-level element.
p:first-letter { color: red }
In the above example, the style is applied to the first letter of the P element.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p { width: 40%; }
p:first-letter {
font-size: 150%;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>
</body>
</html>
The before and after pseudo element
The before and after pseudo elements generates content before or after an element. (Use with the content property)
p:before { content: "Example" }
In the above example, the content is generated before the P element.
p:after { content: "Example" }
In the above example, the content is generated after the P element.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p { width: 40%; }
p:before {
content: "Note:";
color: red;
}
p:after {
content: url(icon.gif);
}
</style>
</head>
<body>
<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>
</body>
</html>
Pseudo elements and Classes
The style can be applied only to the elements with the specified class by using the class.
p.example:first-line { color: red }
In the above example, the style is applied only to the P elements that have the class "example".
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p { width: 40%; }
p.example:first-line { color: red; }
</style>
</head>
<body>
<p class="example">The style is applied to this paragraph. Some text ...</p>
<p>The style is not applied to this paragraph. Some text ...</p>
</body>
</html>
Nesting
The style can be applied only to elements within a certain element by using descendant selectors.
Type selector and Pseudo element :
In this example, the style is applied only to the P elements within the DIV element.
div p:first-line { color: red }
Class selector and Pseudo element :
In this example, the style is applied only to the P elements within the element with the class "example".
.example p:first-line { color: red }
ID selector and Pseudo element :
In this example, the style is applied only to the P elements within the element with the ID "example".
#example p:first-line { color: red }
Nesting example :
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p { width: 40%; }
.example p:first-line { color: red }
</style>
</head>
<body>
<div class="example">
<p>The style is applied to this paragraph. Some text ...</p>
<p>The style is applied to this paragraph. Some text ...</p>
</div>
<div>
<p>The style is not applied to this paragraph. Some text ...</p>
</div>
</body>
</html>