Drawing a cross inside a styled-components div?

Im trying to draw a cross inside a div i styled. I'm using styled-components.

So far my code is as follows:

export const StyledCell = styled.div`
    width: auto;
    background: rgba(${props => props.color}, 0.1);
    border: ${props => (props.type === 0 ? '0px solid' : '4px solid')};
    border-bottom-color: rgba(${props => props.color}, 0.5);
    border-right-color: rgba(${props => props.color}, 1);
    border-top-color: rgba(${props => props.color}, 1);
    border-left-color: rgba(${props => props.color}, 0.7);
    position: relative;
`

i have tried adding:

:after{
  content:"";
  position:absolute;
  border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

to it which works pretty well for one diagonal, but i'm not quite sure how to do the other one as my initial thought was to just change the angle but that seemed to come up with a weirdly placed diagonal

An alternative option is to use linear-gradient() to produce the lines; as this supports multiple gradients, we can do this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  margin: 2rem;
  width: 20rem;
  height: 20rem;
  position: relative;

  /* draw a gradient which is:
     transparent up to 1px less than the midpoint,
     then red for a couple of pixels,
     then transparent again
  */

  /* first from the bottom left corner to the top right ... */
  background: linear-gradient(to top right, 
    transparent calc(50% - 1px), 
    red calc(50% - 1px) calc(50% + 1px), 
    transparent calc(50% + 1px)),
    
    /* ... then from the top left corner to the bottom right */
    linear-gradient(to bottom right, 
      transparent calc(50% - 1px), 
      red calc(50% - 1px) calc(50% + 1px), 
      transparent calc(50% + 1px));     
}

<!-- language: lang-html -->

<div></div>

<!-- end snippet -->