CSS │ 蛍光ペンのような表現を最速で実現する

TECH

2021.03.172021.06.24

当サイトには広告・アフィリエイトリンクが含まれている場合がありますが、それと分かるように表示しています。また、紹介している製品は基本的に自腹で購入しており、忖度のない製品レビューだけが取り柄のサイトです。

よくウェブページで、蛍光ペンでアンダーラインを引いたような表現(←これですね)を見かけるのですが、これを最速で実現します。

蛍光ペン用のstyleを定義する

WordPressの場合、[外観]→[カスタマイズ]から[追加CSS]を選択し、下記CSSを追加します。

.pink_line {
  background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;
}

次に、アンダーラインを引く箇所を「HTMLで編集」し、<span class="pink_line">と</span>で囲みます。

例えば、下記のように編集すると

こうなります。