I want to attach dynamically a pseudo-class :before to a label inside a component whose data come from a db. I know one cannot manipulate pseudo-class (easily/safely) with JS vanilla. So I think about adding this pseudo-class inside the JSX code. Is it possible and how to achieve this goal?
import React from 'react';
const Comp = (props) => {
return (
<div>
<label
className="label" {/* Common to all Comps */}
HERE : insert style which allows to défine pseudo-class :before on label
which is specific to each component Comp; props.id is an id for
each Comp that can be used to create dynamically this class
>
{props.labelName}
</label>
</div>
);
};
export default Comp;
I tried another way by simulating a pseudo-class with a span before the label. It works since it is easy to create a class but in this case, label and span are not linked and I need to drag&drop the label with its pseudo-class, which is easy with pseudo-class and more complicated with two separate elements.