HTML CSS Pseudo Elements
Pseudo Elements are used to design specific parts an element. For example, the first letter of a word, or the first line of a paragraph. Here is the syntax.
selector::pseudo-element {
property:value;
}
Example
This is an example of the text after the pseudo class has been applied. As you can see, it affects the first letter, as well as the first line. To execute, you simply insert class="" with the class name "myExample", into the <p> tag. as with any other class. <p class="myExample"> </p>
Here is the code.
p.myExample::first-letter {
color: red ;
font-size: x-large;
font-style: italic;
}
p.myExample::first-line {
color: purple ;
font-variant: small-caps;
background-color: yellow;
}
List of Widely Used Pseudo Elements
- ::after Inserts after the element.
- ::before Inserts before the element.
- ::first-letter Transforms the first letter.
- ::first-line Transforms the first line.
- ::selection Transforms the selection.
I hope you will join us for the next lesson Lesson 18) Pseudo Classes
Additional Resources