CSS pseudo elements in React

Got a reply from @Vjeux over at the React team:

Normal HTML/CSS:

<div class="something"><span>Something</span></div><style>    .something::after {    content: '';    position: absolute;    -webkit-filter: blur(10px) saturate(2);}</style>

React with inline style:

render: function() {    return (        <div>          <span>Something</span>          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />        </div>    );},

The trick is that instead of using ::after in CSS in order to create a new element, you should instead create a new element via React. If you don't want to have to add this element everywhere, then make a component that does it for you.

For special attributes like -webkit-filter, the way to encode them is by removing dashes - and capitalizing the next letter. So it turns into WebkitFilter. Note that doing {'-webkit-filter': ...} should also work.

Inline styles cannot be used to target pseudo-classes or pseudo-elements. You need to use a stylesheet.

If you want to generate CSS dynamically, then the easiest way is to create a DOM element <style>.

<style dangerouslySetInnerHTML={{  __html: [     '.my-special-div:after {',     '  content: "Hello";',     '  position: absolute',     '}'    ].join('\n')  }}></style><div className='my-special-div'></div>

Inline styling does not support pseudos or at-rules (e.g., @media). Recommendations range from reimplement CSS features in JavaScript for CSS states like :hover via onMouseEnter and onMouseLeave to using more elements to reproduce pseudo-elements like :after and :before to just use an external stylesheet.

Personally dislike all of those solutions. Reimplementing CSS features via JavaScript does not scale well -- neither does adding superfluous markup.

Imagine a large team wherein each developer is recreating CSS features like :hover. Each developer will do it differently, as teams grow in size, if it can be done, it will be done. Fact is with JavaScript there are about n ways to reimplement CSS features, and over time you can bet on every one of those ways being implemented with the end result being spaghetti code.

So what to do? Use CSS. Granted you asked about inline styling going to assume you're likely in the CSS-in-JS camp (me too!). Have found colocating HTML and CSS to be as valuable as colocating JS and HTML, lots of folks just don't realise it yet (JS-HTML colocation had lots of resistance too at first).

Made a solution in this space called Style It that simply lets your write plaintext CSS in your React components. No need to waste cycles reinventing CSS in JS. Right tool for the right job, here is an example using :after:

npm install style-it --save

Functional Syntax (JSFIDDLE)

import React from 'react';import Style from 'style-it';class Intro extends React.Component {  render() {    return Style.it(`      #heart {        position: relative;        width: 100px;        height: 90px;      }      #heart:before,      #heart:after {        position: absolute;        content: "";        left: 50px;        top: 0;        width: 50px;        height: 80px;        background: red;        -moz-border-radius: 50px 50px 0 0;        border-radius: 50px 50px 0 0;        -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        transform: rotate(-45deg);        -webkit-transform-origin: 0 100%;        -moz-transform-origin: 0 100%;        -ms-transform-origin: 0 100%;        -o-transform-origin: 0 100%;        transform-origin: 0 100%;      }      #heart:after {        left: 0;        -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);        -o-transform: rotate(45deg);        transform: rotate(45deg);        -webkit-transform-origin: 100% 100%;        -moz-transform-origin: 100% 100%;        -ms-transform-origin: 100% 100%;        -o-transform-origin: 100% 100%;        transform-origin :100% 100%;      }    `,      <div id="heart" />    );  }}export default Intro;

JSX Syntax (JSFIDDLE)

import React from 'react';import Style from 'style-it';class Intro extends React.Component {  render() {    return (      <Style>      {`        #heart {          position: relative;          width: 100px;          height: 90px;        }        #heart:before,        #heart:after {          position: absolute;          content: "";          left: 50px;          top: 0;          width: 50px;          height: 80px;          background: red;          -moz-border-radius: 50px 50px 0 0;          border-radius: 50px 50px 0 0;          -webkit-transform: rotate(-45deg);          -moz-transform: rotate(-45deg);          -ms-transform: rotate(-45deg);          -o-transform: rotate(-45deg);          transform: rotate(-45deg);          -webkit-transform-origin: 0 100%;          -moz-transform-origin: 0 100%;          -ms-transform-origin: 0 100%;          -o-transform-origin: 0 100%;          transform-origin: 0 100%;        }        #heart:after {          left: 0;          -webkit-transform: rotate(45deg);          -moz-transform: rotate(45deg);          -ms-transform: rotate(45deg);          -o-transform: rotate(45deg);          transform: rotate(45deg);          -webkit-transform-origin: 100% 100%;          -moz-transform-origin: 100% 100%;          -ms-transform-origin: 100% 100%;          -o-transform-origin: 100% 100%;          transform-origin :100% 100%;        }     `}      <div id="heart" />    </Style>  }}export default Intro;

Heart example pulled from CSS-Tricks