Like the pseudo-class, Pseudo-elements are also used
to apply some effects to selector for styling.
There are following pseudo-elements are given below.
1) :first-line
2) :first-letter
3) :before
4) :after
:first-line
:first-line selector is used to apply styles to first
line of targeted element.
There are following properties which can apply are given below
1) font
2) background
3) color
4) word-spacing
5) letter-spacing
6) text-decoration
7) vertical-align text-transform
8) line-height
<style type="text/css">
p:first-line {
color: blue;
}
</style>
<p>
This is a paragraph.First line of this paragraph is blue because
first-line pseudu element is applied.This is a paragraph.First line
of this paragraph is blue because first-line pseudo element is
applied.This is a paragraph.First line of this paragraph is blue
because first-line pseudo element is applied.
</p>
Output of above code
This is a paragraph.First line of this paragraph is blue because first-line pseudu element is applied.This is a paragraph.First line of this paragraph is blue because first-line pseudo element is applied.This is a paragraph.First line of this paragraph is blue because first-line pseudo element is applied.
:first-letter
:first-letter selector is used to apply styles to first
letter of targeted element.
There are following properties which can apply are given below
1) font
2) background
3) color
4) word-spacing
5) letter-spacing
6) text-decoration
7) vertical-align text-transform
8) line-height
9) margin
10) padding
<style type="text/css">
p:first-letter {
color: blue;
font-size: 30px;
}
</style>
<p>
This is a paragraph.It's first letter is bigger because
:first-letter pseudo element is applied on it.
</p>
Output of above code
This is a paragraph. It's first letter is bigger because :first-letter pseudo element is applied on it.
:before and :after
An example of :before and :after pseudo elements is given below with source code.
<style type="text/css">
p:before {
content: "Text from :before";
color: blue;
font-size: 22px;
}
p:after {
content: "Text from :after";
color: blue;
font-size: 22px;
}
</style>
<p>
This is a paragraph.This is a paragraph
</p>
Output of above code
This is a paragraph.It's first letter is bigger because :first-letter pseudo element is applied on it.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
