In the last article, we started learning about pseudo-elements in CSS and we covered two pseudo-elements: ::first-line and ::first-letter which are very helpful in selecting first line and the first letter of text easily. In this article, we are going to learn some more things about pseudo-elements.
Let's begin...
Combine pseudo-elements with CSS classes
We can use CSS classes to select elements more precisely using pseudo-elements. Let's say we have two paragraphs and we want to customize first-letter of the just first paragraph. In this case, we will give some class to first-paragraph and then use it while applying pseudo-elements. If we give specialPara class name to that particular paragraph:
p.specialPara::first-letter {
color: #00FF00;
font-size: 1.5em;
}
Can we use multiple pseudo-elements?
The answer is why not? You can use as many pseudo-elements you want on any given element. Till now we just know ::first-line and ::first-letter. So we can customize first line as well as first letter:
Now as we have seen some properties about pseudo-elements, let's see some more pseudo-elements...
The ::before pseudo-element
The ::before pseudo-element can be used to insert content before the content of the selcted element. To insert the image before a paragraph:
p::before {
content: url(sample.png);
}
The ::after pseudo-element
The ::after pseudo-element can be used to insert content after the content of selcted element. To insert the image after a paragraph:
p::after{
content: url(sample.png);
}
The ::selection pseudo-element
The ::selection pseudo-element matches the portion selected by the user using the mouse. The following properties can be given to this pseudo-element:
color, background, cursor and outline. Example...
::selection {
color: #92F071;
background: #B64C2F;
}
Here is the list of all the pseudo-classes you can use:
- ::after
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::selection
- ::slotted
That's all for today. In the last 4 days, we have learned about all the pseudo things. Hope you are getting them. In the next article, we are going to study about transparency...
Till the #keepCoding.
Comments
Post a Comment