どうも7noteです。疑似要素にも下線(_)がついてしまう時の対処法2選
疑似要素を持つ要素にtext-decoration: underline;
を指定すると、疑似要素にも下線が引かれてしまう時の対処方法について。
↓↓↓こんな感じになって困っていませんか?↓↓↓
![miss.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Faa46b17c-783e-addd-56ad-c2effbdf2f5c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2849ff79ef160e30b72a84ae3face29d)
今回は2つの対処法を紹介できればと思います。
対処法① 「疑似要素をdisplay: inline-block
」
index.html
<span class="ko">こんにちは</span>
style.css
.ko {
text-decoration: underline;
}
.ko::before {
content: "♦";
padding-right: 0.5em;
display: inline-block;
}
結果
![mihon2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F22e99442-54c1-c9e9-5241-a3b80d370a00.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=66214e3571256a2cd4161dd40b78e65a)
text-decoration
はインライン要素にしか効かない特性があるため、この方法で対処することができます。
対処法② 「親要素でくくって、親要素に疑似要素を当てる」
index.html
<span class="oya"><span class="ko">こんにちは</span></span>
style.css
.oya::before {
content: "★";
padding-right: 0.5em;
}
.ko {
text-decoration: underline;
}
結果
![mihon1.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fbef3122b-fd95-ae9e-359d-f1accadda4f7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e393f66ea21b0aeb2b0c5ef34b770ed5)
下線を子要素に引くので、親要素についている疑似要素には下線が付かない。分かりやすいですね。
親要素がブロック要素の時は親要素にdisplay: inline-block;
等を指定する方がコーディングしやすいかも。。
まとめ
おすすめは①の方法ですね。直感的で余分なタグを増やす必要もないので。
場面によっては②の方がデザインの意味と一致するなと思った時は①の方法がいいかなと思います!