When attempting to use the content property in a :before or :after pseudo element, I am encountering a rendering issue. Here is a simplified version of the component:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Container = styled.div`
display: block;
padding: 1rem;
`;
const Foo = styled.p`
&:before {
content: '\201C';
display: block;
font-size: 4rem;
font-weight: bold;
height: 4.25rem;
}
&:after {
content: '\201D';
display: block;
font-size: 4rem;
font-weight: bold;
height: 2.625rem;
}
font-weight: bold;
`;
function Test({ txt }) {
return (
<Container>
<Foo>{txt}</Foo>
</Container>
);
}
Test.propTypes = {
txt: PropTypes.string.isRequired,
};
export default Test;
However, nothing appears to be rendered. Referring to this answer from How to render pseudo before content dynamically in styled-component, I attempted:
const Foo = styled.p`
&:before {
content: '\201C';
display: block;
font-size: 4rem;
font-weight: bold;
height: 4.25rem;
}
&:after {
content: '\201D';
display: block;
font-size: 4rem;
font-weight: bold;
height: 2.625rem;
}
font-weight: bold;
`;
Another recommendation from this answer suggests using double colons as shown in Can anyone tell me why before not working on styled components?:
const Foo = styled.p`
&::before {
content: '\201C';
display: block;
font-size: 4rem;
font-weight: 700;
height: 4.25rem;
}
&::after {
content: '\201D';
display: block;
font-size: 4rem;
font-weight: bold;
height: 2.625rem;
}
font-weight: bold;
`;
Despite trying these solutions, I still cannot render a before or after element. I have verified that the content is properly referenced and a height is specified in rem. I am using Styled Components version "^5.3.5", cleared cache, deleted the public directory, and tested in both Chrome and Firefox, but the quotes are not being rendered.
Research
- Before and After pseudo classes used with styled-components
- Using Styled Components and passing props to psedo element before not working
- Can anyone tell me why before not working on styled components?
- Why is :before pseudoelement rendered before content, not element?
- Styled-components multiple Pseudo Elements
What am I doing incorrectly, and how can I successfully render pseudo elements?