「CSSで蛍光ペンっぽいアンダーライン」はtext-decorationで実現できる

2022年現在、CSSでテキストに蛍光ペン風の下線を引く方法をググるとだいたいlinear-gradientを使った記事がヒットします。しかし、いまどきはlinear-gradientを使わなくてもtext-decorationで同じような表現ができるので紹介しておきます。 結論: こういうCSSをあてる /* セレクタ名はてきとう */ .highlight { text-decoration: underline; /* 下線 */ text-decoration-thickness: 0.5em; /* 線の太さ */ text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */ text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */ text-decoration-

[takc923]

「○○を簡単に実現する方法」みたいなのと違って、タイトルが要約になっていてめちゃくちゃ良い

[kabuakantech]

テキストを選択すると蛍光ペン部分が黒くなるのが少し気になっちゃう

[remonoil]

テキスト選択しながら読む癖があるんだが、これは選択すると文字と同色になってしまい文字の下半分が見えない。やめてほしい

[hk-03]

Marpでスライドを書くとき、蛍光ペン風のアンダーラインを引きたいので、この方法を参照してみよ。

[paulownia]

いいねこれ

[eartht]

linear-gradientがいつまで経っても書き方覚えれないのでありがたい。

[w1234567]

中身の薄い広告目的のサイトでよく使われてるから印象が悪い、お前が勝手にまとめた要点なんか知るか押し付けるなってなる

[shige-u]

text-decoration-thicknessとtext-decoration-skip-inkがスマホのfirefoxに対応してない...