Today, we will see a simple way to add quotation marks around text using CSS. While there are several ways to do this, this, by far, is one of the easiest ways.

HTML

Let's say this HTML <blockquote> needs to be enclosed with quotation marks.

<blockquote>
  Add some quotation marks around me please!
</blockquote>

CSS

We will use the ::before and after:: pseudo elements to add the quotation marks around the text.

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

Check out the codepen.