Website Things

How to make Quotation Marks in CSS

Posted on Wednesday, May 30, 2012
According to CSS2, adding quote marks to any blockquote automatically, should be pain free.  The spec handles it in such a way as to be entirely language independent - negating hard coded quote marks and allowing simple style sheet changes.  
/* STANDARD QUOTES */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q:lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
q:lang(da) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
/* SAFARI SUPPORT */
q:before { content: '\201C'; }
q:after { content: '\201D'; }
q q:before { content: '\2018'; }
q q:after { content: '\2019'; }
/* BLOCKQUOTES */
blockquote * { quotes: none; }
blockquote > *:before { content: '\201C'; }
blockquote > *:after { content: '\201D'; }
blockquote q:before { content: '\2018'; }
blockquote q:after { content: '\2019'; }
/* LANGUAGE-SPECIFIC QUOTES SAFARI STYLE */
*[lang~='da'] q:before, q[lang~='da']:before,
*[lang~='da'] blockquote > *:before, blockquote[lang~='da'] > *:before { content: '\201E'; }
*[lang~='da'] q:after, q[lang~='da']:after,
*[lang~='da'] blockquote > *:after, blockquote[lang~='da'] > *:after { content: '\201C'; }
*[lang~='da'] q q:before, q[lang~='da'] q:before,
*[lang~='da'] blockquote q:before, blockquote[lang~='da'] q:before { content: '\2019'; }
*[lang~='da'] q q:after, q[lang~='da'] q:after,
*[lang~='da'] blockquote q:after, blockquote[lang~='da'] q:after { content: '\2019'; }
*[lang~='sv'] q:before, q[lang~='sv']:before,
*[lang~='sv'] blockquote > *:before, blockquote[lang~='sv'] > *:before { content: '\201D'; }
*[lang~='sv'] q:after, q[lang~='sv']:after,
*[lang~='sv'] blockquote > *:after, blockquote[lang~='sv'] > *:after { content: '\201D'; }
*[lang~='sv'] q q:before, q[lang~='sv'] q:before,
*[lang~='sv'] blockquote q:before, blockquote[lang~='sv'] q:before { content: '\2019'; }
*[lang~='sv'] q q:after, q[lang~='sv'] q:after,
*[lang~='sv'] blockquote q:after, blockquote[lang~='sv'] q:after { content: '\2019'; }
.blog-item blockquote{
display: block;
margin-left: 30px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
font-size: 120%;
font-weight: bold;
color: #bcc4a8 ;
}
.blog-item blockquote p{
line-height: 125%;
}