Q&A
今ツールで確認し、位置から理解することができました。ありがとうございます。li要素でcolorプロパティをまだ指定していないため、なんとか::afterで指定しているcolorプロパティは適用されているのですね。ではこのマークアップではもうテキストに対してのアンダーラインの適用を分けることはかなわず、HTMLを用いてli要素の外側に新しくｐタグなどで書いた方が良いのでしょうか。もしよろしければご回答お願い致します。
前提・実現したいこと
疑似要素のアンダーライン指定を取り消したい。
ここに質問の内容を詳しく書いてください。
CSS（SaSSでコンパイルしています)でli要素に対して疑似要素::afterをつけてテキストを挿入しました。
実現させたいことはli要素のみにアンダーラインを引いて::afterの要素にはアンダーラインを引かないようにすることです。
そこでまずli要素に対してtext-decoration: underline;を適用しました。その後に::afterに対して下の行でtext-decoration: none;を指定しました。するとデベロッパーツールでは::afterにtext-decoration: none;が適用されているとなっているのにも関わらず、表示結果はli要素と::afterともにアンダーラインが引かれるというものになりました。
::afterへのtext-decorationの指定はできないことになっているのでしょうか。そうでないならこのtext-decoration: none;が機能していない理由を教えていただきたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<div class="footer-item ft3"> <h3>最近の投稿</h3> <ul> <li class="ft-theme"><a href="#">書くためのテーマ</a></li> <li class="ft-img"><a href="#">画像付きの投稿</a></li> <li class="ft-quote"><a href="#">引用付きの投稿</a></li> </ul> </div>.ft3 {
width: 142px;
ul {
list-style-type: none;
padding: 0;
li {
text-decoration: underline;
}
.ft-theme {
&::after {
content: '2018年9月1日';
text-decoration: none;
color: red;
}
}
試したこと
ここに問題に対して試したことを記載してください。
::afterへのcssでのスタイルの適用が全くできていないのか確かめるためにcolor: red;を指定しましたがこれはしっかりと適用されていました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
li>aにアンダーラインを引けば良いのでは？
Re: DawnAIM さん
投稿2020/06/23 09:56
総合スコア18164
0
ベストアンサー
そうでないならこのtext-decoration: none;が機能していない理由を教えていただきたいです。
開発ツールで表示すれば位置が出るのでわかりやすいですが、::afterでセットされるものは、<li>の内側に入ります。
::after自体に下線を引かなかったとしても、::afterで生成したものは<li>の一部ということになり、<li>として下線が引かれることになります。
投稿2020/06/23 09:14
総合スコア145184
> li要素でcolorプロパティをまだ指定していないため、なんとか::afterで指定しているcolorプロパティは適用されているのですね。
いえ、colorはそれぞれに適用されます。
<li>の途中に<img>を入れればそこにもアンダーラインが引かれる、というように、「<li>としての」アンダーラインが引かれています。
なるほど、liで指定したアンダーラインが見えている状態なんですね。だから::afterのアンダーラインがなかろうが,元の引かれた線があるから私は::afterでtext-decorationが適用されていないと勘違いをしたのですね。やっとわかりました。とても親切な対応ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/23 10:09