先日CSS疑似要素の::beforeと::afterの使い方と正しい書き方【CSS】で解説した疑似要素beforeとafterを部分的に削除(解除)したい場面があったりします。そんな時の方法を解説していきます。
疑似要素before、afterを削除(解除)する方法
before、afterを削除するには、contentプロパティの値をnoneに変更します。
<p>疑似要素before、afterを削除(解除)する方法</p>
<p>疑似要素before、afterを削除(解除)する方法</p>
<p>疑似要素before、afterを削除(解除)する方法</p>
<p>疑似要素before、afterを削除(解除)する方法</p>p::after{
content: "New";
font-size: 1.3rem;
color: #FFF;
display: inline-block;
padding: 5px;
margin-left: 1em;
background-color: red;
}
p:not(:first-child)::after {
content: none;
}疑似要素before、afterを削除(解除)する方法
疑似要素before、afterを削除(解除)する方法
疑似要素before、afterを削除(解除)する方法
疑似要素before、afterを削除(解除)する方法
上記の例では、最初の1つにだけ「New」と記載し、それ以降は表示しないようにしています。
この他にも、スマホの時だけ表示する・表示しないなどの切り替えも、content: none;で簡単に切り替えが可能になります。
さいごに
いかがでしたでしょうか。
今回は疑似要素before、afterの削除(解除)の方法を解説しました。簡単にできますのでぜひ参考にしてみてください。
