見出しの横に可変幅のライン

見出しなどの横に可変ラインを引きます。

HTML(Pug)

h1.both-sides 見出し（両側にライン）
h1.right-side 見出し (右側にライン)

CSS(SCSS)

.both-sides {
  display: flex;
  align-items: center;
  &::before,
  &::after {
    content: "";
    background-color: gray;
    flex-grow: 1;
    height: 1px;
  }
  &::before {
    margin-right: 0.5em;
  }
  &::after {
    margin-left: 0.5em;
  }
}

.right-side {
  display: flex;
  align-items: center;
  &::after {
    content: '';
    background-color: gray;
    flex-grow: 1;
    margin-left: 0.5em;
    height: 1px;
  }
}