text-decoration：pseudoelementから下線を削除するには？

Question

aにtext-decoration: underlineがあります。私はそのように保つ必要があります。しかし、私はまた、擬似要素から下線を取り除こうとしています。それを無効にすると、text-decoration: none !important;は効果がないようです。それについて何かできますか？

http://codepen.io/anon/pen/yMzJoZ

a { 
 
    text-decoration: underline; 
 
} 
 
a:before { 
 
    content: '#'; 
 
    text-decoration: none !important; 
 
}

<ul> 
 
    <li> 
 
    <a href="#">asdf</a> 
 
    </li> 
 
</ul> 
 

Answer 1

あなたpseudoelementは実際にそれの表示タイプを変更することなく、あまりにも簡単に変更することができないだけでインラインテキストノード、です。 display: inline-block;を追加してください。これにより、あなたはそれを個別に操作することができます。

a { 
 
    text-decoration: underline; 
 
} 
 
a::before { 
 
    content: '#'; 
 
    text-decoration: none !important; 
 
    display: inline-block; 
 
}

<ul> 
 
    <li> 
 
    <a href="#">asdf</a> 
 
    </li> 
 
</ul>