CSS Trics

by rough cheap

HTML

<h3 class="border-back">
About
</h3>
<p class="para">
見出しで区切るスタイルは Flexbox と Calc で実装しています。文字数が変わっても自動で調整されます。もちろん CSS を使わずともマークアップで対応はかのうですが、ブログに実装してほしいという要望をいただくのでその場合はCSSで対応しています。出来る限りコードをシンプルにしてみました。試してみてください！
</p>
<h3 class="border-back">
About
</h3>
<p class="para">
見出しで区切るスタイルは Flexbox と Calc で実装しています。文字数が変わっても自動で調整されます。もちろん CSS を使わずともマークアップで対応はかのうですが、ブログに実装してほしいという要望をいただくのでその場合はCSSで対応しています。出来る限りコードをシンプルにしてみました。試してみてください！
</p>

CSS

.border-back {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 calc(50% - 50vw) 30px;
}

.border-back::before,
.border-back::after {
  content: '';
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg, #777 0, #777 1px, rgba(0 0 0 / 0), rgba(0 0 0 / 0) 50%
  );
  background-size: 8px 8px;
}

.border-back::before {
  margin-right: 30px;
}

.border-back::after {
  margin-left: 30px;
}