Code Disciples

A blog for all things code

Fri 06 May 2022

Easy quotation marks with CSS

Posted by Abhishek Pednekar in CSS   

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.


Share



Comments