「CSSで下線引く時に使うCSSは何？」という時に使えるプロパティです。
下線／text-decoration:underline;
まずは、このプロパティ「text-decoration:underline;」で下線（アンダーライン）が引けます。
<p>吾輩は猫である。<span style="text-decoration:underline;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="text-decoration:underline;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>結果▼
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
これで良ければ…以上です。
色や波線を引きたい時は、指定の方法を追加します。波線や点線なども引けます。
[rml_read_more]
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
text-decoration:underline wavy #f00;
text-decoration:underline dotted #0f0;<p>吾輩は猫である。<span style="text-decoration:underline wavy #f00;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="text-decoration:underline dotted #0f0;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>他にもいくつかアンダーラインを引く方法がありますので、試してみます。
ボーダー／border-bottom
border-bottomプロパティを使うことでも下線が引けます。
border-bottom は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。
https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom
下線を引きたい場所をspanなどのタグで囲み、 border-bottomプロパティを指定します。そうすると下線のような状態になります。borderの指定を変えれば、色や線の形状も変えることができます。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
<p>吾輩は猫である。<span style="border-bottom:1px solid #f00;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="border-bottom:1px dotted #ff0;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>border-bottom:1px solid #f00;
border-bottom:1px dotted #ff0;マーカー風／background:linear-gradient
background:linear-gradient プロパティを使って表示させます。マーカーを引いたようなイメージの下線を表示できます。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
<p>吾輩は猫である。<span style="background:linear-gradient(transparent 70%, #FFFF00 0%);">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="background:linear-gradient(transparent 50%, #FF0000 0%);">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>background:linear-gradient(transparent 70%, #FFFF00 0%);
background:linear-gradient(transparent 50%, #FF0000 0%);まとめ
CSSで下線を引く方法でした。他にも色々と方法がありそうですので、もし「CSSで下線を引きたい」を思ったときには、ご参考ください😃
