Author avatar

Vivek Kumar

Handling :before in ReactJS

Vivek Kumar

  • Sep 16, 2019
  • 6 Min read
  • Sep 16, 2019
  • 6 Min read
Web Development


When we work in the React component framework then we find that there are certain pseudo-elements whose existence cannot be overlooked. These pseudo-elements act in a certain special way; due to which, their presence cannot be felt but their absence can make the transition attained by you incomplete. A pseudo-element is, basically, a kind of keyword which is included in a selector that allows you to style a particular segment of the chosen element(s). For instance, ::first-line can be implemented in order to alter the appearance of the font associated with the foremost line in a paragraph.

The reason that we created this guide is not to throw light on the characteristics or functions of the pseudo-elements rather it is to understand the relationship between the :before pseudo-element and the ReactJS framework, as well as how it can be programmatically handled. By definition, :before is a form of pseudo-element that you can apply in order to insert a specific thing before the content of an element. By the time you finish with this guide, it is fully expected that you will reach a verdict as to whether you can make ReactJS programmatically handle :before or not. And, in this course of learning, we are going to look at the programmatically set properties, as well as the application of the CSS :before pseudo-element with the inline CSS in ReactJS.

Programmatically Handling `:before` – A Case Study

Let us take an example where we are required to programmatically set the width of :before for a <div>.

<div className="something" style={someStyle}> </div> 

If we wish to define someStyle in order to change the width of :before for something in the <div>, then it is pivotal to understand that pseudo-elements cannot be directly styled with the CSS inline styles. You are required to style this something class name via stylesheet with a selector known as .something:before. Make a note that it is not needed to be seen as a restriction of ReactJS, but, instead, a design option meant for HTML plus CSS.

If you wish to programmatically alter the width concerning the pseudo-element :before, then it is possibly more prudent in the form of the regular Document Object Model (DOM) component rendered through ReactJS.

`:before` - Distinction in CSS and HTML

For a pseudo-element like :before, it is not feasible for you to mention inline styles. Though both pseudo-elements and classes are alike, they are defined for CSS with the help of selectors in the form of abstractions of the document tree. It cannot be expressed in the form of HTML under any circumstances. In contrast to that, an inline form style attribute is meant to be specified under HTML for a specific element. As a matter of fact, inline styles occurring only in HTML, are merely implicated to the HTML element which they are defined upon and not based on the pseudo-elements generated by it.

Can ReactJS Programmatically Handle `:before`?

Now, coming to the question we have created this guide to answer: is it going to be possible for ReactJS to programmatically handle :before? Well, if you are using the pseudo-element like :before in a CSS style language then it is not feasible for you to programmatically handle the same in ReactJS.

If your objective is to have programmatic control over :before then the only way that it can be done is through the basic HTML framework created before passing the ReactJS transition through CSS. It is the basic HTML format that renders you the liberty to handle the pseudo component and run it as per your needs and convenience. So, you can bring all the desired changes in the pseudo while building the basic HTML skeleton and ensure the existence of the changed properties in the files rendered in CSS language for the ultimate ReactJS output.


So, while navigating through the final segment of this guide, it is fully expected that all your dilemmas related to programmatically handling the :before pseudo-element in ReactJS are pretty clear. In the guide, we went through the demonstrative case study by taking all the fractions of the elements and their characteristics into account. We also tried to realize the distinction between :before pseudo in both CSS and HTML frameworks. The proficiency of programmatically handling :before by ReactJS is based on which stage you wish to introduce the changes. If you wish to handle the programming at the basic HTML skeleton level then you can accomplish the same seamlessly. But on the other hand, if you are thinking of programmatically handling pseudo at the CSS level then you are mistaken, as there is not going to be adequate support on this style language platform and all your efforts are going to be in vain. Not to mention, the final rendered output in ReactJS is also not going to be of any use. So, apply the changes at the right checkpoints and get seamless results with top-notch persistency.


You can further refer the following resources which are also used as references for this guide: