CSSで見出しの左右に＼斜線／を付ける

良く見出しに ＼ゆっくりしていってね／ みたいな飾りを付けることがあります。

ただ、これを文字でやると、角度が変えられないのでちょっと微妙です。
またアクセシビリティ的にも文字で書かれていると、スクリーンリーダーで読み上げられてしまうので、あまりよろしくありません。

CSSで解決してみましょう。

<h2>ゆっくりしていってね</h2>

h2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
  color: #f11f8d;
}

h2::before,h2::after {
  width: 1px;
  height: 28px;
  content: "";
  background-color: #f11f8d;
}

h2::before {
  margin-right: 0.5em;
  transform: rotate(-30deg);
}

h2::after {
  margin-left: 0.5em;
  transform: rotate(30deg);
}

JSBin
https://output.jsbin.com/cixeyof

意外に簡単ですね。