<blockquote>
By raae for Semantic Advent |
You've seen an example of <blockquote>
in every edition of Semantic Advent, as the following lines are wrapped in one.
The
<blockquote>
HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation.
HTML Docs
The default styling is sensible, but <blockquote>
is one of those elements I like to have a little fun with...
All verse lines have the same HTML structure:
<blockquote>
What fun it is to ride and sing<br/>
A sleighing song tonight!
</blockquote>
The "with border styling" CSS removes the default indentation and adds a border on the left:
blockquote:nth-of-type(2) {
margin: 0;
padding: 0.5em 1em;
border-left: 6px solid red;
}
The "with fancy styling" CSS also removes the default indentation but uses ::before
and ::after
to add the opaque quotation marks.
blockquote:nth-of-type(3) {
margin: 0;
padding-left: 1em;
position: relative;
}
blockquote:nth-of-type(3)::before,
blockquote:nth-of-type(3)::after {
font-size: 500%;
line-height: 1;
opacity: 0.2;
color: red;
position: absolute;
}
blockquote:nth-of-type(3)::before {
content: "“";
margin-left: -1rem;
margin-top: -1rem;
}
blockquote:nth-of-type(3)::after {
content: "”";
margin-left: -0.5rem;
}
The complete code is available on CodeSandbox.
How are you liking Semantic Advent so far?
All the best,
Queen Raae