見たら分かるでしょう? Google AdSense広告を利用しています

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

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

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

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

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

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

アンダーラインを引く箇所をspan要素で装飾する

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

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

こうなります。

コメント

タイトルとURLをコピーしました