Shostack + Friends Blog Archive

 

Relentless Navel Gazing, Pt 9

I’ve made the text darker, and hope its a tad easier to read, and thanks to N, have finally added a closing quote to blockquotes:


blockquote {
background: url("https://adam.shostack.org/blog/wp-content/uploads/2018/08/uq.png") no-repeat bottom right;
}

blockquote:before {
content: url("https://adam.shostack.org/blog/wp-content/uploads/2018/08/q.png");
display: run-in ;
padding-right: 10px;}

The tricky part was to ensure that the closing quotation mark stayed within the quoted block. CSS “:after” puts the next element as a new block, which interacts with the styling of a blockquote, and causes the element to show up on the next line. So by using a ‘proper’ before, and a background in place of the ‘:after’ it looks the way I think it should.

[Update: :after is part of CSS2.1, so if you’re using an older browser, things may not display quite right.]