CSSでbefore、after疑似要素が表示されない場合のポイント

投稿ページ画像プログラミング

after疑似要素、before疑似要素が表示されない場合に確認すべきポイントとサンプルをまとめました。

スポンサーリンク

確認ポイント:疑似要素(contentプロパティ)

これが選択した要素の最初の子要素として疑似要素を作成します。

a::before {
  content: '';←これが空のコンテンツ作成部分
}

a::after {
  content: '';←これが空のコンテンツ作成部分
}

CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::before の表記法(二重コロン付き)が導入されました。
ブラウザーでは CSS2 で導入された :before も使用できます。

つまり、::beforeはCSS3系の書き方で、:beforeはCSS2系の書き方です。
対応しているブラウザであればどちらでも表示できます。

確認ポイント:基準位置(positionプロパティ)

static
特に位置は決まっていません。
top、bottom、left、rightはcssに記載していても適用されません。

relative
positionプロパティでstaticで指定した場所に配置されます。
top、bottom、left、rightを指定した場合、staticを基準として指定位置が適用されます。

absolute
絶対位置への配置となる。

fixed
絶対位置への配置となるのはabsoluteと同じです。

基本的に疑似要素の最低限必要そうなプロパティ

a::after {
  content: '';
  display: << >>;
  position: << >>;
  z-index: << number >>;
}
a::before {
  content: '';
  display: << >>;
  position:<< >>;
  z-index: << number >>;
}

before疑似要素、after疑似要素サンプル

contentプロパティに★を追加

HTML

<span class='sample1'></span>

CSS

sample1::before {
  content: "★★★★★★★★★";
}

実行結果

contentプロパティの色を変える

HTML

<span class='sample2'></span>

CSS

sample2::before {
  content: "★★★★★★★★★";
  color: pink;
}

実行結果

コメント