emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

CSSでbefore,after要素が表示されなくて困ったとき

★2017.01.25追記:昔に書いた記事ですが、ちょくちょくアクセスがあるわりに適当な内容だったので修正しました。

--------------------------------------------------------

 

CSSの擬似要素でshadowのテクニックに挑戦しようとして色々つまづいたのでメモ。

 

 

とにかく表示されない。

 

あれ?ブラウザおかしいんじゃねえの!?と思った時にチェックしてみましょう。

 

 

疑似要素とは

疑似要素を使うと、指定したボックス内の前後にHTMLを編集せずとも擬似的にコンテンツを追加することができるCSSのテクニックです。

 

例)

<div>本文です。</div>

div:before {

  content: "beforeです。";

}

div:after {

  content: "afterです。";

}

↓↓↓

<div>beforeです。本文です。afterです。</div>

 

このような事が可能です。上記以外にもいろんなことができますので、疑似要素を使うと少ないHTMLソースで効率の良いパーツを作ることも可能です。

 

しかし、記述に仕方によっては疑似要素がうまく表示されない事があります。

 

 

疑似要素表示されない時に確認しておきたい事

「content」は必ず書く(空の場合は「content: "";」としておく)

まずcontentがないと始まりません。contentに文字を入れない場合はcontent: "";としておきます。

 

「content」が空の場合、width、heightを指定する

適当なwidthとheightを指定します。擬似要素の大きさを指定して、見やすいサイズにしてみましょう。

contentに文字を入れる場合はすぐに表示が確認できると思いますが、空の場合、表示されないことが多いのではないでしょうか。

 

backgroundを指定してみる

contentが空の場合、どこに擬似要素が表示されているのか分からなくなっていますので、ひとまず背景色を付けて疑似要素が見えるようにしてやりましょう。

 

display: block;を指定してみる

これで大方見えるようになるはずです。疑似要素のdisplayの初期値はinlineなので隠れてしまっている場合があります。display: block;にして疑似要素の表示位置が崩れる場合は、positionなどで調整します。

 

position: absolute;を指定してみる

position: absolute;を指定すると疑似要素が親ボックス内に表示されると思います。「top,bottom,left,right」の値が初期値のautoである必要があるので、これらに数値が指定されている場合、一度autoに直してみるとよいです。

 

positionが指定されている場合、z-indexに高い数値を指定してみる

疑似要素が親要素などの裏に隠れている可能性があります。z位置を高めて前面にだしてやりましょう。

  

文字をいれてみる(例:「content: "文字です";」)

試しにcontentに文字をいれてみましょう。どこに擬似要素が表示されているのか確認できるかもしれません。文字を入れる場合、ダブルクオーテーションを忘れずに。

 

 

疑似要素の表示確認に最低限必要そうな記述

.test:after {
   content: "てすと";
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   background: #cccccc;
}

 

あくまで「確認用」ですので、あとは、不要な要素を消したり、記述を足したりして狙った装飾に近づけていくとよいです。

 

emuramemo(c) All Rights Reserved.