In HTML & CSS
.testAfter::after {
content: "->"
}
<div class="testAfter">Something</div>
We can use ::after and other pseudo code like this in css.
So we need external css to use pseudo code in react.
// test.css
.rightElement::after {
content: "-> after";
border-top: 1px solid red;
}
// Test.js
import React from 'react';
import './test.css';
class Test extends React.Component {
render () {
const color = "red";
return(
<div>
<div className='rightElement' style={{backgroundColor: color}} >Example </div>
</div>
)
}
}
export default Test;
Using Inline
render () {
const color = "red";
return(
<div style={{width: '500px', margin: '0 auto', marginTop: '100px'}}>
<div className='rightElement' style={{backgroundColor: color}} >Example </div>
<div style={{borderTop: `10px solid ${color}`}}></div>
</div>
)
}
The trick here is instant of creating new element via ::after or ::before I create new element by my own.
But creating new element for only styling purpose is not good(Just my option).