Easy way to add quotes with CSS

You probably were asked to do a website for someone that had a page of references or quotes from customers. Maybe you spent a lot of time in Photoshop trying to create the best quote known to man but I’m here to tell you that it doesn’t need to be that hard.

The proper way to markup quotes and citations

First of all you need to make sure you mark up your quote properly. Here is how you should mark up your quotes with with the citation included:

[cc lang=”html”]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

John Doe


[/cc]

Add this to your css file

[cc lang=”css”]
.quote blockquote::after,
.quote blockquote::before {
content: ‘”‘;
font-weight: bold;
color: #666666;
}
[/cc]

That’s it. View it in your browser and you will see quotes.

Leave a Reply

Your email address will not be published. Required fields are marked *