<blockquote>

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