CSSの擬似要素でshadowのテクニックに挑戦しようとして色々つまづいたのでメモ。
とにかく表示されない。
あれ？ブラウザおかしいんじゃねえの！？と思った時にチェックしてみましょう。
疑似要素とは
疑似要素を使うと、指定したボックス内の前後にHTMLを編集せずとも擬似的にコンテンツを追加することができるCSSのテクニックです。
例）
<div>本文です。</div>
div:before {
content: "beforeです。";
}
div:after {
content: "afterです。";
}
↓↓↓
<div>beforeです。本文です。afterです。</div>
このような事が可能です。上記以外にもいろんなことができますので、疑似要素を使うと少ないHTMLソースで効率の良いパーツを作ることも可能です。
しかし、記述に仕方によっては疑似要素がうまく表示されない事があります。
スポンサードリンク
疑似要素が表示されない時に確認しておきたい事
「content」は必ず書く（空の場合は「content: "";」としておく）
まずcontentがないと始まりません。contentに文字を入れない場合はcontent: "";としておきます。
例）
.sample:before {
content: "";
width: 30px;
height: 30px;
background: #ff0000;
}
「content」が空の場合、width、heightを指定する
適当なwidthとheightを指定します。擬似要素の大きさを指定して、見やすいサイズにしてみましょう。
contentに文字を入れる場合はすぐに表示が確認できると思いますが、空の場合、表示されないことが多いのではないでしょうか。
例）
.sample:before {
content: "";
width: 30px;
height: 30px;
background: #ff0000;
}
backgroundを指定してみる
contentが空の場合、どこに擬似要素が表示されているのか分かりにくいので、ひとまず背景色を付けて疑似要素が見えるようにしてやりましょう。
例）
.sample:before {
content: "";
width: 30px;
height: 30px;
background: #ff0000;
}
display: block;を指定してみる
疑似要素のdisplayの初期値はinlineなので疑似要素が隠れてしまっている場合があります。display: block;にして疑似要素の表示位置が崩れる場合は、positionなどで調整します。
例）
.sample:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: #ff0000;
}
position: absolute;を指定してみる
position: absolute;を指定すると疑似要素が親ボックス内に表示されると思います。「top,bottom,left,right」の値が初期値のautoである必要があるので、これらに数値が指定されている場合、一度autoに直してみるとよいです。
例）
.sample:before {
content: "";
position: absolute;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: 30px;
height: 30px;
background: #ff0000;
}
positionが指定されている場合、z-indexに高い数値を指定してみる
疑似要素が親要素などの裏に隠れている可能性があります。z位置を高めて前面にだしてやりましょう。
例）
.sample:before {
content: "";
position: absolute;
z-index: 1000000;
width: 30px;
height: 30px;
background: #ff0000;
}
文字をいれてみる（例：「content: "文字です";」）
試しにcontentに文字をいれてみましょう。どこに擬似要素が表示されているのか確認できるかもしれません。文字を入れる場合、ダブルクオーテーションを忘れずに。
例）
.sample:before {
content: "文字です";
}
まとめ 疑似要素の表示確認に最低限必要そうな記述
.test:after {
content: "てすと";
display: block;
position: absolute;
width: 100px;
height: 100px;
background: #cccccc;
}
あくまで「確認用」なので、あとは、不要な要素を消したり、記述を足したりして狙った装飾に近づけていくとよいです。
