Blockquote with webflow

The way a <blockquote> displays has nothing to do with it being an HTML <blockquote>, it’s only CSS styling. Once you’ve got your code and structure correct, use any or all Webflows’ features to make your element look like what you want.


If you want real “text” quotation marks to be added, you’ll have to add custom CSS code with pseudo elements. For example, this code adds double quotes around a <blockquote> element:

blockquote:before { content: '\201C' }
blockquote:after { content: '\201D' }

Some will say it’s incorrect and should be:

blockquote { quotes: '\201c' '\201d'; }
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

…but I’ll have to read more about this to have an opinion.

Edit: I just read more about it and this is indeed the most correct code to use.


But you can also want something more graphical, in that case do it with Webflows’ UI, something like giving <blockquote> a class name then a large padding all around, a subtle background color, an even larger padding on the left and a big icon of quotation marks in the background.

A bit like this: Simple and Nice Blockquote Styling | CSS-Tricks - CSS-Tricks

http://vincent.polenordstudio.fr/snap/q5ih8.jpg


So if we can style any DIV like this, why is it important to really declare a <blockquote> element in the code?

Because more people than we think acces our content with something different than a web browser. It can be an accessibility device, a console/terminal, a voice speaker etc. All these devices will ignore your CSS but still know that it’s a quote and will treat it in their own way, making sure the human behind gets that it’s a quote.

This is called accessibility.

3 Likes