CSS：テキストに蛍光ペンを引く

ブログなどでよく使われている蛍光ペン風の装飾をつけるスタイル。
コーディングをしている時に、意外と方法が分からなかったのでメモ書きです。折り返し対応OK 。

See the Pen text-highLight by kura (@kura000) on CodePen.

ソースコード

HTML

<strong>タグで囲った部分に蛍光ペンを引いていきます。

<p>蛍光ペンの<strong>サンプル</strong>です。</p>

CSS

strong{
  background: linear-gradient(transparent 50%, #F8B24B 50%);
  margin-left: -18px;
  margin-right: -18px;
  padding-bottom: 1px;
  position: relative;
  z-index: -1;
}	
strong::before{
  content: "";
  display: inline-block;
  border-bottom: 12px #FFF solid;
  border-right: 12px transparent solid;
  border-left: 12px #FFF solid;
  border-top: 12px transparent solid;
  transform: rotate(90deg) translateX(8px);
}
strong::after{
  content: "";
  display: inline-block;
  border-bottom: 12px #FFF solid;
  border-right: 12px transparent solid;
  border-left: 12px #FFF solid;
  border-top: 12px transparent solid;
  transform: rotate(-90deg) translateX(-8px);
}

スタイル解説

<strong>タグ

backgroundで蛍光ペン部分の背景色を指定

蛍光ペンの端を斜めにしない場合はこれだけでOK

background: linear-gradient(transparent 50%, #F8B24B 50%);

端を斜めにするために擬似要素を入れている分、隣り合うテキストとの間隔があいてしまいます。

marginをマイナスでとって、間隔を調整

margin-left: -18px;
margin-right: -18px;

padding-bottomで蛍光ペン部分を下にずらす

padding-bottom: 1px;

z-indexを指定しない場合、部分が上に来てしまい、隣り合うテキストに被ってしまいます。

z-index: -1; で下に来るよう調整

position: relative;
z-index: -1;

擬似要素

蛍光ペンの端を斜めにするために、擬似要素で三角形をつくり被せています。三角形の色を背景色と合わせてください。試しに、背景色を赤に変えてみるとこんな感じです。

色付きの状態で三角形の位置を合わせる
三角形の色を背景色に変更
<strong>のマイナスマージンを調整

の順でスタイル調整していくと分かりやすいです。

端を斜めにしないスタイルだと、background-colorの設定だけで簡単実装できるのでした。なるほど。。。