◆ inline だと text-decoration を none にしても親に指定したのが適用される
親要素で text-decoration をつけて 疑似要素で none にしたのに

<style>
span{
text-decoration: underline;
}
span:before, span:after{
content: "★";
text-decoration: none;
}
</style>
<span>abc</span>

pelem-textdecoration

:before と :after にも線があります
「text-decoration: none」 にしてるのに

原因は display が inline だからです
inline-block にすると線は引かれません

<style>
span{
text-decoration: underline;
}
span:before, span:after{
content: "★";
text-decoration: none;
display: inline-block;
}
</style>
<span>abc</span>

pelem-textdecoration2

疑似要素の問題じゃない

よくありそうなのが疑似要素というだけで普通の要素でも起きます

<style>
p{
text-decoration: underline;
}
span{
text-decoration: none;
}
</style>
<p><span>【</span>abc<span>】</span></p>

これだと 【】 も含めて下線付きです