Jak k nadpisu přidat horizontální čáru

Potřebujete na web přidat nadpis a nějak ho zvýraznit? Zkuste vedle nadpisu dát tenkou linku. Zde přikládám kód. V kódu si můžete změnit barvu a tloušťku čáry, případně i její délku. Já linku nastavil tak, aby byla vždy do konce řádku.

HTML struktura

<div class="ap-title-block-wrap">
  <h2 class="ap-border-heading">Nadpis</h2>
</div>

CSS – zde je důležité mít na .ap-title-block-wrap display block. Když je tam flex, tak to nebude fungovat.

.ap-title-block-wrap {
  display: block;
}

.ap-border-heading {
  display: flex;
  align-items: center;
}

.ap-border-heading:after {
  border-top: 1px solid #e9ecef;
  margin-left: 25px;
  flex: 1 0 0rem;
  content: '';
}