Can i modify CSS pseudo elements in React?

Question

i have this CSS on my project, can i modify :after content from "BARU" to "" on react ? i can't find best solution on react.

padding-left: 25px;
                font-size: 12px;
                font-weight: bold;
                background: #FFFEF0;
                &:after {
                    content: "BARU";
                    position: absolute;
                    top: 10px;
                    width: auto;
                    height: auto;
                    border-radius: 15%;
                    background: #F76800;
                    color: #ffffff;
                    padding:2px 5px;
                    font-size: 7px;
                    margin-left: 5px;
                    display: inline;
                }

You can use [CSS Variables](https://stackoverflow.com/questions/40164169/using-css-variables-custom-properties-in-a-pseudo-elements-content-propert) and [change it from JS](https://stackoverflow.com/questions/41370741/how-do-i-edit-a-css-variable-using-js) — Nikita Madeev, Jun 26 '20 at 07:42
you can use styled-components which let you pass props to css; — Akber Iqbal, Jun 26 '20 at 08:17
I would modify the className. And one class with x pseudo, and other with y pseudo — Peter, Jun 26 '20 at 08:37

score 0 · Answer 1 · answered Jun 26 '20 at 07:57

one way is to use css variables and change them from javascript;

another way is to read content value from an attribute on element and change that attribute in react;

function App() {
    const [text, setText] = React.useState("hello world");
    return (
     <p className="bisar" aftercontent={text}>
       fellan behman bisar....  
       <button onClick={()=>setText("Yo changed")}>
       change Text
       </button>
     </p>
     )
}

ReactDOM.render(<App />, root);

.bisar:after{
  content: attr(aftercontent);
  position:absolute;
  top: 20px;
  right:60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Can i modify CSS pseudo elements in React?

1 Answers1