<h2 class="eyebrow">Headline with eyebrow</h2>
<h2 class="emoji" data-emoji="😍">Headline with emoji from attribute</h2>
<h2 class="divider">Headline with responsive divider lines</h2>

// Learn more about pseudo elements in the related tutorial:
// @link https://moderncss.dev/guide-to-advanced-css-selectors-part-two/

h2 {
  position: relative;
}

.eyebrow::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 5ch;
  background-color: blue;
  top: -0.15em;
  left: 0;
}

.emoji {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.25em;
  align-items: center;
}

.emoji::before {
  content: attr(data-emoji);
}

.divider {
  display: grid;
  grid-template-columns: clamp(1em, 8vw, 6ch) 1fr clamp(1em, 8vw, 6ch);
  grid-gap: 0.25em;
  align-items: center;
  text-align: center;
}

.divider::before,
.divider::after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: red;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  padding: 2rem;
  color: #333;
}