Day 6: Horizontal rule 〰️

A horizontal rule is usually used as a visual divider between two textual elements.

The example component is visible below.

A few notes about this horizontal rule component:

• the default horizontal rule style is reset using the all: unset declaration,
• the content is set using the before pseudo-selector.

The code:

<hr class="advent-rule">

.advent-rule {
  all: unset;

  display: block;

  margin-top: 3em;
  margin-bottom: 3em;

  text-align: center;
}

.advent-rule:before {
  content: "〰️〰️〰️";
}