Is there a way to modify '&:before/:after' to give a dynamic property?

A styled-component that has &:before attribute that I want to give access to a dynamic color property. But I'm lost to how to apply that.

I've tried passing the props to <Hover /> and it works. But the triangle in &:before cannot access that.

const Hover = styled.div`
  padding:7px;
  margin: -102px auto;
  border-style: solid;
  border-radius: 15px; 
  border-width: 3px;
  text-align: left;
  font-weight: 400;
  font-size: 19px;
  color: #000000;
  font-family: sans-serif;
  position: absolute;
  left:-15px;
  z-index:10;

   &:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid ;
  border-right: 10px solid transparent;
  border-top: 10px solid ;
  border-bottom: 10px solid transparent;
  left: 19px;
  bottom: -19px;
  z-index:10;
  
}
`;

As a single styled-component the following class is:

class MarkerHover extends Component {
  
    render() {
        const {color, children}= this.props
        return (
            
            
            <Hover style={{backgroundColor: color }}>
           {...children}
                </Hover>
            
                
        );
    }
}

export default MarkerHover;

I expect to have a whole colored Window after successfully passing the color props to the &:before division.

As the documentation of Styled Components states (see https://www.styled-components.com/docs/basics#passed-props) you can read passed props:

const Hover = styled.div`
  color: ${props => props.color};
`;

when you pass them like this:

<Hover color="#f00" />

You can use that same prop in your pseudo-element as well:

const Hover = styled.div`
  color: ${props => props.color};
  &::before {
    background: ${props => props.color};
  }
`;

So don't use the style attribute on your styled component, but pass regular props.

If you want to apply a CSS rule only after a certain condition, you can do that like this:

const Hover = styled.div`
  color: #ccc;
  &::before {
    content: "";
    padding: 16px;
    ${props => props.withBg ? `background-color: ${props.withBg}` : ''}
  }
`;

With background:

<Hover withBg="#f00" />

Without background:

<Hover />