React styled-components ::before and ::after pseudo elements not showing when passing functions

Question

I want to add ::before and ::after pseudo elements to a css style-object from styled-components, such that I can reuse them in multiple other style elements (I am doing it for AboutWrapper in the example code). However, the ::after does not show up, when I run the code. The ::before is showing. It is the other way around, when I switch their positions in the code. I noticed, that both pseudo elements show up, when I comment out the functions that set top, left and bottom and replace them with constant values. What is the problem?

Unfortunately, the code snippet here on Stackoverflow is not runnable and I am not sure why... maybe I need to include styled-components somehow?

import React from 'react'
import styled, { css } from 'styled-components'


export const showHtmlTagStyle = css`
    position: relative;     // important for the before and after

  &::before {
    content: '<section>';
    font-family: 'La Belle Aurore', cursive;
    color: #fff; 
    font-size: 18px;
    position: absolute;
    top: ${(props) => (props.tagTop ? props.tagTop : '1rem') };//1rem;
    left: ${(props) => (props.tagLeft ? props.tagLeft : '2rem')};//2rem;
  }

  &::after {
    content: '/section';
    font-family: 'La Belle Aurore', cursive;
    color: #fff; 
    font-size: 18px;
    position: absolute;
    bottom: ${(props) => (props.tagBottom ? props.tagBottom : '1rem') };//1rem;
    left: ${(props) => (props.tagLeft ? props.tagLeft : '2rem')};//2rem;
  }
`

export const AboutWrapper = styled.div`
    max-width: 1000px;
    height: 100%;
    display: flex;
    justify-content: center;
    ${showHtmlTagStyle}
`

const AboutSection = () => {
  return (
    <AboutWrapper tagTop='1rem' tagLeft='2rem'>
      Just some random Text that should have a 'before' tag before it and an 'after' tag after it.
    </AboutWrapper>
  )
}


ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <AboutSection />
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

score 0 · Answer 1 · answered Dec 01 '22 at 14:09

You could try using just 1 : instead of 2 (::) as described inside this answer

export const showHtmlTagStyle = css`
    position: relative;     // important for the before and after

  &:before {
    content: '<section>';
    font-family: 'La Belle Aurore', cursive;
    color: #fff; 
    font-size: 18px;
    position: absolute;
    top: ${(props) => (props.tagTop ? props.tagTop : '1rem') };//1rem;
    left: ${(props) => (props.tagLeft ? props.tagLeft : '2rem')};//2rem;
  }

  &:after {
    content: '/section';
    font-family: 'La Belle Aurore', cursive;
    color: #fff; 
    font-size: 18px;
    position: absolute;
    bottom: ${(props) => (props.tagBottom ? props.tagBottom : '1rem') };//1rem;
    left: ${(props) => (props.tagLeft ? props.tagLeft : '2rem')};//2rem;
  }
`

I tried that, but this is not the solution unfortunately – Philipp Dec 01 '22 at 16:31 — Philipp, Dec 01 '22 at 16:31

React styled-components ::before and ::after pseudo elements not showing when passing functions

1 Answers1