How can you make a quotation mark appear before a paragraph using pseudo-elements?
Adding Quotation Marks with ::before in CSS
You can use the ::before pseudo-element to insert quotation marks or other decorative symbols before a paragraph. This allows you to add visual cues without changing the HTML content.
- 1
Use
::beforewith thecontentproperty to insert the quotation mark, e.g.,content: '“';. - 2
Set
position: relativeon the parent if you need precise control over placement. - 3
Style the pseudo-element with
font-size,color,margin, ortransformto match your design. - 4
Combine with
::afterfor closing quotation marks if needed.
In this example, the ::before pseudo-element inserts a gray quotation mark before the paragraph. You can adjust font-size, color, and position to match your layout and style preferences.
- 1
Use pseudo-elements for purely decorative symbols to avoid altering semantic HTML.
- 2
Ensure the quotation mark does not overlap text by adjusting padding or positioning.
- 3
Combine with
::afterfor closing quotes if needed for visual consistency. - 4
Test across different screen sizes and browsers for proper alignment and display.
Scenario Questions
0-2 years experience
- 1How would you add an opening quotation mark before every paragraph using only CSS, without touching the HTML?
- 2What happens if you forget to set display: block on the paragraph when using ::before to add a quote?
2-5 years experience
- 1A designer says the blockquote quotes look broken on mobile — the ::before quote is overlapping the text. How do you debug and fix this?
- 2We’re using ::before to add quotes in a CMS-generated blog, but sometimes the quote appears even when there’s no paragraph content. How do you prevent that?
5-8 years experience
- 1We’re building a multilingual content system where quote styles vary by locale — how would you architect the CSS to support this without bloating the stylesheet?
- 2A performance audit shows our ::before quote styles are causing layout thrashing on low-end devices. What’s the root cause and how do you optimize it?
8+ years experience
- 1Our legacy design system uses ::before for quotes across 20+ products — we’re migrating to a design token system. How do you plan the deprecation and ensure no visual regressions?
- 2We need to support screen readers properly while keeping visual quotes via CSS. How do you balance accessibility, maintainability, and design consistency at scale?
Follow-up Questions
- What happens if the paragraph is inside a nested container with its own ::before styles?
- How would you handle this if the quote needed to change based on language?
- Why wouldn’t you just use an actual quote character in the HTML?