こちらの記事でボーダーを歪ませる、といった手法を探している時に、こんな記事を見つけました。
CSSで表現する圏点(IE対応)・蛍光マーカー・手書き風下線 [無料ホームページ作成 まめわざ]
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;
}
Simplicityのスタイルを除去したりもしているので、場合によってはh2あたりの表記は不要かと思います。
二重線を表現するのに疑似要素（before・after）を使いました。
それぞれの線で雰囲気を少しだけ変更したかったので background-position を変えることで微妙な違いが表現できています。（たぶん）
色の指定なんかはもっと変数とかを駆使して簡単にできそうですが、とりあえずはこれで良いかな。
どこか他のところでマーカーに再トライしたいです！