CSSでbefore、afterが表示されない時

IT

あれっ⁉︎
擬似要素が表示されないんだけどなんでだ⁉︎
ってなった時の確認するポイントをまとめました。

スポンサーリンク

基準位置(positionプロパティ)を確認

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

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

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

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

http://www.htmq.com/style/position.shtmlより引用

擬似要素(contentプロパティ)を確認

例えば、この見出しにも擬似要素が使用されて

.article h2:before {
content: ”;←これが空のコンテンツ作成部分
height: 60px;
width: 60px;
border: solid 1px #999;
border-radius: 20%;
display: block;
position: absolute;
left: 20px;
top: 0;
margin: auto;
z-index: 100;
}

こんな感じですね。

気をつけるべきポイントは、positionプロパティとdisplayプロパティですね。displayはblockでほとんどが大丈夫だと思うのですが、positionはサイトによって少し違うかもしれません。

擬似要素の最低限必要そうなプロパティ

h2:before {
content: ”;
display: block;
position: absolute;
z-index: 100;
}

あとは、top、bottom、left、right等で場所を指定してあげれば表示できるかと思います。
そのあとは、自分の好みでcssを追加して装飾するだけですね。

z-indexは私まだ調べてないんですが、indexの番号が小さいと表示されないんですよね…

コメント