How to add css pseudo element in react

Question

How do I add CSS pseudo-element ::after dynamically through react. I have a header where I'm setting its background color to black on scroll. Now I want to add ::after as well on scroll where I could add some more styling to it. Is there any way I could achieve this?

const Header = () => {

  const [ headerColor, setHeaderColor ] = useState(false);

  const headerColorChange = () => {
    window.scrollY >= 80 ? setHeaderColor(true) : setHeaderColor(false)
  }

  useEffect(() => {
    window.addEventListener("scroll", headerColorChange)
  }, [])
  
  return (
    <header id="header" className={ headerColor ? 'header-color' : null}>
        
    </header>
  )
}

In my CSS file:

.header-color {
    background-color: $black;
}

I would like to add ::after to my header so that I could add more styling to it. (on Scroll)

&::after {
   max-width: 100%;
}

Before scroll my ::after is at #header

#header::after {
    width: 100%;
    max-width: 1170px;
    border-bottom: 1px solid $white;
  }