Vivek Kumar

Using CSS Pseudo Elements in React

Vivek Kumar

Jul 26, 2019
8 Min read
3,795 Views

Jul 26, 2019
8 Min read
3,795 Views

Web Development

React

Introduction

In the application of the CSS language, there are certain components that, despite not having a genuine presence yet, play a crucial role in the overall framework generated by the language. Such elements are usually termed as Pseudo Elements.

The most common type of pseudo-element that are applied in CSS is termed as “custom pseudo-elements”. The primary role of these elements is to help you access the internal segments of a component in order to apply the styling.

In this guide, we are going to discuss the application of the CSS pseudo-elements to React and how they are going to help you with an extending stylesheet. Additionally, we are going to discuss two important forms of pseudo-elements that are applied in CSS, namely the :after and :before. We are primarily focusing on these two pseudo-elements because they play a crucial role in most CSS transitions and it is essential for you to be familiar with them in advance.

So, let's initiate with a simple case of a custom pseudo-element.

An Illustration of a Custom Pseudo-Element in CSS

Let us have a glance over the following case where a playButton in VideoPlayer is targeted as a pseudo-element of any class that eventually extends the element called VideoPlayer.

1
2
3
4
5
6
@namespace "VideoPlayer"
.root {}
.playButton {
	background: black;
	color: white;
}

css

Custom Pseudo-Elements with Style

It is suggested to use :: in order to make an access point to the internal segment of the component subsequent to the custom tag selector or, rather, next to the extended class selector. For instance, you can import the component VideoPlayer to the stylesheet and then style the internal segment known as playButton by overriding the original (primary) styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
/* CSS input */
@namespace "Page";
:import {
    -st-from: './video-player.st.css';
    -st-default: VideoPlayer;
}
.mainVideo {
    -st-extends: VideoPlayer; /* define mainVideo as VideoPlayer */
}
.mainVideo::playButton { /* override mainVideo playButton */
    background: green;
    color: purple;
}

css

The above code leads to the following result:

1
2
3
4
5
6
/* CSS Output */
.Page__mainVideo.VideoPlayer__root {}
.Page__mainVideo.VideoPlayer__root .VideoPlayer__playButton {
    background: green;
    color: purple;
}

css

Pseudo-Elements: Extend Stylesheet

In the cases where the stylable stylesheet root is extended to another unique stylesheet then the pseudo-elements automatically get exposed, overextending the stylesheet as well as the available inline.

In the example that has been highlighted below, the class playbutton is accessible via the original form of the component file known as videoplayer.css. Thereafter, it is extended as well as styled in the super-video-player.css type stylesheet in the form of a custom pseudo-element with root class.

Please note that the page.css type stylesheet actually extends to super-video-player.css, but differently on .mainPlayer class and style playButton.

super-video-player.st.css

1
2
3
4
5
6
7
8
9
10
11
@namespace "SuperVideoPlayer";
:import {
    -st-from: './video-player.st.css';
    -st-default: VideoPlayer;
}
.root {
    -st-extends: VideoPlayer;
}
.root::playButton {
    color: gold;
}

css

Output:

1
2
3
4
.SuperVideoPlayer__root.VideoPlayer__root {}
.SuperVideoPlayer__root.VideoPlayer__root .VideoPlayer__playButton {
    color: gold; 
}

css

page.st.css

1
2
3
4
5
6
7
8
9
10
11
@namespace "Page";
:import {
    -st-from: './super-video-player.st.css';
    -st-default: SuperVideoPlayer;
}
.mainPlayer {
    -st-extends: SuperVideoPlayer;
}
.mainPlayer::playButton {
    color: silver;
}

css

Output:

1
2
3
4
.Page__mainPlayer.SuperVideoPlayer__root {}
.Page__mainPlayer.SuperVideoPlayer__root .VideoPlayer__playButton {
    color: silver;
}

css

The Basic Syntax :after and :before

As I stated before, in this guide we are also going to discuss the basic pseudo-elements in the form of :after and :before. We are deep diving on this pair because they are simple yet very critical. Both pseudo-elements :before as well as :after, are pretty easy in terms of coding. One can find the same with the below-mentioned example:

1
2
3
4
5
6
7
#AnExample:before {
   content: "#";
}

#AnExample:after {
   content: ".";
}

css

Here, you are required to note down a couple of things in the above-given example. At first and foremost, our focus is on the same element applying #AnExample:before and then #AnExample:after. They are basically the pseudo-elements performing within the code. Secondly, in the absence of the content property, which is basically the segment of a generated content module by the specification, there is no worthwhile role of the pseudo-elements. Hence, as the pseudo-element selector is itself required in order to target the specific element, one cannot insert anything at all without including the content property.

In the example that we have discussed, the concerned element comprising an ID example is going to have a peculiar hash (#) symbol highlighted before the particular content as well as a full stop (.) or a period highlighted after the concerned content.

The Properties of the Inserted Content

The content that we have created is only visible on CSS. Once the concerned inserted element is conspicuous, add the margins, padding, and height, by defining a block-level element. A simple question arises once this step is completed. “How do we style the pseudo-elements?” Just have a glance on the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#AnExample:before {
   content: "#";
   display: block;
   width: 200px;
   height: 200px;
}

#AnExample:after {
   content: ".";
   display: block;
   width: 200px;
   height: 200px;   
}

css

In the above code, it is the given three style lines which affect the pseudo content: display: block; width: 200px; height: 200px;. It is absolutely true that the pseudo-elements are unique, in terms of their own characteristics. It is, basically, due to the fact that both the styles and the content are going to remain in an unchanged declaration block. The standard inheritance rules of CSS are applied to inserted elements. For instance, if you do have a font load of Arial, Helvetica, sans-serif that are applied to the <body> element of a document, then the pseudo-element is going to automatically inherit the concerned font load in a similar fashion as any other element. Also, pseudo-elements are not going to inherit the styles that are not inherited naturally from the parent elements. These styles include margins and padding.

Conclusion

In this guide, you have learned the characteristics of the pseudo-elements associated with CSS. Apart from the basic role, we also discussed the basic pseudo-components, :before and :after, in order to ensure that you would not remain blank once you are introduced to the application of the pseudo-elements in the practical scenarios. It is suggested to follow along with the guide to attain successful results.

References

While writing this guide, the following resources have been referred to:

Louis Lazaris, Learning To Use :after And :before Pseudo-Elements In CSS

Pseudo-Elements