CSSで見出しに手書き風の二重下線を引く

こちらの記事でボーダーを歪ませる、といった手法を探している時に、こんな記事を見つけました。

https://mamewaza.com/support/blog/text-emphasis.html

mamewaza.com

これはぜひ当サイトに取り入れたい！と思い、見出しに蛍光ペンで引いたようなデザインを入れようかとトライしましたが、なんだかしっくり来なかったので手書き風の下線を表示することにしました。

ただ、1本線だとリンクと紛らわしいので、二重線にすることにしました。

投稿記事を書く時はSimplicityで準備されている「見出し2（<h2>になる）」を使います。

見出しです

こんな感じになります。

CSSはこちら。（Scssからコンパイルしてます）

#main .article .entry-content h2 {
  display: inline-block;
  padding: 0 10px 10px 10px;
  margin: 50px 0 0 0;
  border: none;
  position: relative;
}

#main .article .entry-content h2:before, #main .article .entry-content h2:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 100%;
  height: .3em;
  background-repeat: repeat-x;
  background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(246, 89, 115, 0)), color-stop(0.1, rgba(246, 89, 115, 0.02)), color-stop(0.5, #f65973), color-stop(0.98, rgba(246, 89, 115, 0)), to(rgba(246, 89, 115, 0)));
  background-image: -webkit-radial-gradient(center center, 0.2em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.1em, rgba(246, 89, 115, 0) 0.2em), -webkit-radial-gradient(center center, 0.4em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.3em, rgba(246, 89, 115, 0) 0.4em), -webkit-radial-gradient(center center, 0.7em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.6em, rgba(246, 89, 115, 0) 0.7em), -webkit-radial-gradient(center center, 7.1em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 7em, rgba(246, 89, 115, 0) 7.1em);
  background-image: radial-gradient(0.2em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(0.4em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(0.7em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(7.1em 0.1em at center center, #f65973, rgba(246, 89, 115, 0));
}
#main .article .entry-content h2:before {
  bottom: 7px;
  left: 0;
  background-position: right bottom;
}
#main .article .entry-content h2:after {
  bottom: 0;
  left: 0;
  background-position: left bottom;
}

#main .article .entry-content h2 {

display: inline-block;

padding: 0 10px 10px 10px;

margin: 50px 0 0 0;

border: none;

position: relative;

}

#main .article .entry-content h2:before, #main .article .entry-content h2:after {

position: absolute;

content: "";

display: inline-block;

width: 100%;

height: .3em;

background-repeat: repeat-x;

background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(246, 89, 115, 0)), color-stop(0.1, rgba(246, 89, 115, 0.02)), color-stop(0.5, #f65973), color-stop(0.98, rgba(246, 89, 115, 0)), to(rgba(246, 89, 115, 0)));

background-image: -webkit-radial-gradient(center center, 0.2em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.1em, rgba(246, 89, 115, 0) 0.2em), -webkit-radial-gradient(center center, 0.4em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.3em, rgba(246, 89, 115, 0) 0.4em), -webkit-radial-gradient(center center, 0.7em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 0.6em, rgba(246, 89, 115, 0) 0.7em), -webkit-radial-gradient(center center, 7.1em 0.1em, #f65973 0, rgba(246, 89, 115, 0) 7em, rgba(246, 89, 115, 0) 7.1em);

background-image: radial-gradient(0.2em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(0.4em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(0.7em 0.1em at center center, #f65973, rgba(246, 89, 115, 0)), radial-gradient(7.1em 0.1em at center center, #f65973, rgba(246, 89, 115, 0));

}

#main .article .entry-content h2:before {

bottom: 7px;

left: 0;

background-position: right bottom;

}

#main .article .entry-content h2:after {

bottom: 0;

left: 0;

background-position: left bottom;

}

Simplicityのスタイルを除去したりもしているので、場合によってはh2あたりの表記は不要かと思います。

二重線を表現するのに疑似要素（before・after）を使いました。

それぞれの線で雰囲気を少しだけ変更したかったので background-position を変えることで微妙な違いが表現できています。（たぶん）

色の指定なんかはもっと変数とかを駆使して簡単にできそうですが、とりあえずはこれで良いかな。

どこか他のところでマーカーに再トライしたいです！

見出しです

人気の記事［週間］

人気の記事