Emotion: How can i pass props to pseudo element?

[SoYoung210]

Description:

I want to pass props to the after element, But i have an error..
I found all documents, but i cant solve my issue

interface Time {
  time: number
}

const Bubble = styled<'div', Time>('div')`
  display: inline-block;
  position: relative;
  background: rgba(104, 127, 209, 0.5);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 9px;
  margin-top: 9px;
  line-height: 15px;

  &:first-of-type {
    &:before {
      content: '';
      position: absolute;
      top: 20%;
      left: -9px;
      width: 0;
      height: 0;
      border-top: 0px solid transparent;
      border-radius: 1px 0 0 0;
      border-bottom: 12px solid transparent;
      border-right: 9px solid rgba(104, 127, 209, 0.5);
    }
  }

  &:last-of-type {
    &:after {
      content: ${props => `${props.width}%`};
      position: absolute;
      left: 100%;
    }
  }
`

i cant find after element.

Documentation links:

Can I refer to this document?

[kud]

Oh god, why this is closed without any answer. It's exactly what I needed. 😬

[Andarist]

@kud there is no difference between passing props to your element or its pseudo-elements, if you share a runnable repro case of your problem I might be able to help you

[SoYoung210]

@kud
I closed the issue because it was my mistake. 😅 Here's example.

&:last-of-type {
    &:after {
-      content: ${props => `${props.width}%`};
+      content: '${props =>  `${props.width}`}';
      position: absolute;
      left: 100%;
      font-size: 10px;
      margin-left: 8px;
      bottom: 3%;
    }
  }

[kud]

Yeah I was trying this:

const ColourSquare = styled.div`
  width: 4rem;
  height: 4rem;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 1rem;

  background-color: ${({ colour }) => colour};

  &:before {
    content: ${({ colour }) => `${colour}`};
    display: block;
  }
`

Apparently the ' were missing. Thank you!

[kud]

Thank you @SoYoung210 and @Andarist 👍🏻