WDS58 - Pseudo-elements (Part 2)

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.