このページでは擬似要素、before、afterについてまとめていきます。

before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。 before、afterでできるCSSデザインから見ていきましょう。

サンプル

1、サンプル1

2、サンプル2

解説

1、サンプル1

疑似要素before,afterを使わないと・・・

サンプル1は確かにimgタグをインライン要素として、埋め込むこともできます。
※画像は40×40で作成

<p><img src="hoge.jpg" width="40" alt="画像">文字文字文字</p>

すると以下のようになってしまいます。

これでは矢印の画像をもう少し下にしたい場合、操作できません。行中に画像が埋め込まれているという状況だからです。

疑似要素beforeのみをまずは使ってみる。

ここで、befor,afterの出番です。
まずはbeforeのみを使います。
HTML部

<p>文字文字文字</p>

CSS部

@charset "utf-8";

p:before {
    content: url(yajirusi.jpg);
    margin: 10px;
    position: relative;
    top: 14px;
}

するとこのようになります。

CSSの解説 positionプロパティについての解説はboxの配置方法を参照

p:before {
    content: url(yajirusi.jpg);/*矢印の画像を挿入する*/
    margin: 10px;/*矢印と文字とのmarginは10px*/
    position: relative;/*直前の要素から相対的な位置にする*/
    top: 14px;/*親要素の基準位置からの距離微妙に調整していった結果14が最適だった*/
}

2、サンプル2

今度はボックスの左右の線にグラデーションの影を付ける方法です。

A,まずはbox表示

HTML部

<body>
<div id="box"></div>
</body>

CSS部

#box{
	margin:50px auto;
	width: 400px;
	height: 300px;
	background: #FFFFFF;
	border: solid 1px #000000;
}

ボックスが中央に表示されたらOKです。

B,次に影を付ける用のボックスを描いて確認する。

CSS部

#box{
	margin:50px auto;
	width: 400px;
	height: 300px;
	background: #FFFFFF;
	border: solid 1px #000000;
	position:relative;/*これを追記*/
}


#box:before,#box:after{/*ID属性ならdiv#box:before,div#box:afterでもいいし、class属性ならdiv.box:before,div.box:afterでもいい。*/
	content:"";
	position:absolute;
	width: 30px;/*適当でいい。400px÷2より小さい数がわかりやすい。30%などでもいい*/
	height: 290px;/*298pxにしてグラデーションをかけると、上のほうにまで影が突き出るため、少し小さ目に*/
	border: 1px solid #000000;
	z-index:1;/*まずはこれを表示させてボックスのありかを確認する。*/			
}
div#box:before
{
    left: 5px;      /* 左側用*/
}
 
div#box:after
{
    right: 5px;     /* 右側用*/
}
するとこうなる。

C,上側5pxから始まるようにし、次に影を付け、z-indexを-1にする。

#box{
	margin:50px auto;
	width: 400px;
	height: 300px;
	background: #FFFFFF;
	border: solid 1px #000000;
	position:relative;
}


#box:before,#box:after{/*ID属性ならdiv#box:before,div#box:afterでもいいし、class属性ならdiv.box:before,div.box:afterでもいい。*/
	content: "";
	position:absolute;/*これ重要*/
	width: 10px;/*適当でいい。400px÷2より小さい数がわかりやすい。30%などでもいい*/
	top:5px;/*追記。影が突き出るため、上から5px分の位置からグラデーションを開始する*/
	height: 290px;/*290くらいが妥当。ここは微調整してください。*/
	border: 1px solid #000000;
	z-index:-1;/*最後は-1にして後ろ側に回り込ませる。*/			
}
#box:before{
    left: 5px;/*左側用*/
    box-shadow:-10px 0px 10px rgba(0,0,0,0.4);
}
 
#box:after{
    right: 5px;/* 右側用*/
    box-shadow:10px 0px 10px rgba(0,0,0,0.4);
}

するとこのようになる。

完成です。 左側のみに影をかけようとしても、上側や下側も少し影ができるため、左右のみに影つけるためのcontentボックスを小さめにすることが重要です。

最終更新:2015年05月12日 23:19