Using CSS Only for Quote Effect
To my surprise, it is possible to achieve the old quote effect using only CSS.
This method involves adding a pseudo element to the block quote using :before. The pseudo element contains quote symbols stacked vertically with the help of overflow-wrap: anywhere, aligned to the left of the text to create the desired effect.
The solution adapts well to changes in container and font size, but there is room for improvement such as reducing the extra whitespace between the quote and the text.
Snippet Showcase
Feel free to run the snippet below for a visual demonstration.
h4 {
color: blue;
margin-bottom: 0;
}
.old-quote {
display: inline-block;
position: relative;
padding-left: 0.8rem;
}
.old-quote:before {
content: '""""""""""""""""""""""""""""""""""';/* truncated for brevity */
/* CSS styling properties for pseudo element */
}
.old-quote:after {
content: '"';
width: 0.8rem;
}
/* Additional styles for French quotes */
.old-quote-fr:before {
content: '«««««««««««««««««';/* truncated for brevity */
}
.old-quote-fr:after {
content: "»";
}
<h4>Test I - short quote</h4>
<div class="old-quote">
Alles hat ein Ende, nur die Wurst hat zwei
</div>
<h4>Test II - long quote</h4>
<div class="old-quote old-quote-fr">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium...
</div>
<h4>Test III - large font quote</h4>
<div class="old-quote" style="width:50%;font-size:1.5em;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium...
</div>