婚活LABより、ブライダルネットの期間限定クーポン配布中!!

::beforeの疑似要素のスタイルを削除、解除する目から鱗の方法

::beforeの疑似要素のスタイルを削除、解除する目から鱗の方法

まだまだ僕も知識がたりないですね。

WordPressなどの様々なテーマで見出し(h2など)の疑似要素::beforeや::afterに予め定義されているスタイルが気に入らないときってありますよね。これをサクッと解除、削除したい。

当たり前と言えば当たり前なんだけど、論理的思考力に欠ける僕にはすぐに思いつきもしませんでした。デザイナーさん達には多分常識なことではあるとは思いますが非デザイナーさんたちの為に記事にもまとめときます。

ものすごく簡単に::before ::afterのスタイルを削除、解除する。

疑似要素::before ::afterに指定されているプロパティすべてに打ち消すプロパティ値を記述しなくてもいいんです。

ただ、contentプロパティの値をnoneにするだけ。

/*  ::beforeの場合  */

h2::before {
   content: none;
}

/*  ::afterの場合  */

h2::after {
   content: none;
}


たったこれだけです。

ちょっとだけ解説

見出しなどに前に決まった文字列や装飾などを表示されたいときに疑似要素::before ::afterが使われます。

たとえば下記のようなコード

<p class="sample">サンプル</p>

では以下のように表示されます。

サンプル

これにCSSでクラス名「sample」に以下のように指定すると

.sample::before {
   content:">";
}

以下のように表示されます。

サンプル

他にもcontentプロパティを空白にしてCSSをこんな感じで記述すると

.sample2::before {
   content:""; /*ダブルクォーテーションの中身を空白にする*/
   border-left:3px solid #000;
}

以下のように、左側にボーダーが表示されました。

サンプル

空白のなかに入れた場合は幅が確保されない為、positionプロパティなどで調整する必要がありますが今回はテーマとずれるので割愛します。

これcontentプロパティいらなくない?と思うかもしれませんがcontentプロパティ指定しないと表示されません。
なにかを表示させたい場合は疑似要素::before ::afterにcontentプロパティは必須です。

ですので今回のテーマ「::before ::afterのスタイルを削除、解除したい」場合はcontentプロパティにnoneを指定すれば表示されなくなるというわけです。

削除、解除した場合の注意点

先ほども少し触れましたが、Wordpressのテーマなどを使用してだれかが定義した::before ::afterのスタイルを削除、解除した場合、positionプロパティなどで元の要素の位置を調整している場合が多いため、そちらも一緒に解除するようにしましょう。

このあたりわからないことがあればコメントください。できるだけ迅速に回答します。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!