ブログなどの記事を書く時、少し目立たせたい部分にマーカーを引きたいな…となることはないでしょうか。
今回はマーカー風の装飾に関するメモです。

改行が必要ない短い文章にマーカーを引きたいとき

改行が必要ないときはシンプルにspanで区切り、背景をつければOKです。

コード

.marker1 {
    background-color: #FFEB58;
}

サンプル

吾輩は猫である

文字の縦半分くらいにマーカーを引きたいとき

コード

.marker2 {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.marker2::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    height: 50%;
    width: 100%;
    background-color: #FFEB58;
}

サンプル

吾輩は猫である

改行が入るほどの長文にマーカーを引きたいとき

コード

.marker3 {
  background: linear-gradient(transparent 50%, #FFEB58 0%);
  display: inline;
}

サンプル

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

目立たせたい文字にはマーカーを！

マーカーのような装飾を入れると、なんとなく学生時代を思い出しますね。
みなさんもぜひ、目立たせたい文字にはマーカー風のCSSを当ててみてください。