This particular issue can be a bit tricky to navigate. When utilizing makeStyles, it expects a styles object (or a function that returns an object). This object uses class names as keys and objects containing attribute-value pairs as values. These values are strings, such as "block", "green", or "10px 15px".
In CSS, the ::before and ::after pseudo-elements allow for the addition of content onto the page. Every pseudo-element must include a CSS content property, as without it, the default value is set to normal/none, resulting in no content being displayed.
The problem lies within your code where you have included content: '' in your object. What you actually need to do is pass an empty string as the CSS value, like this: content: '""'.
Similarly, if you wish to insert text using the content property, you cannot simply add the string. Instead, ensure to encapsulate the text within quotes and pass it as a string:
// ❌ this approach won't work
{
content: 'some text',
}
// ✅ this approach will work
{
content: '"some text"',
}
To resolve this issue and successfully add the element, you can implement the following:
const useStyles = makeStyles({
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '""',
display: 'block',
height: '2px',
width: '2px',
},
},
});