before,after擬似要素
css3から今まで擬似クラスと同じ:（シングルコロン）での表記だったが、擬似要素については::（ダブルコロン）を使うように修正された。とはいえ、擬似要素にシングルコロンを使うことはできる（IEが対応してないから）。
li:before、li:afterの基本
li:before {content:"before";}とli:after {content:"after";}を指定すると
- あいうえお
- かきくけこ
- さしすせそ
吹き出しの作成方法
ボーダーをつけるためafterとbefore両方指定
/*css*/
.m1 {
position:relative;
display:inline-block;
padding:15px 40px;
background-color:#fee;
border:1px solid #ccc;
text-align:center;
border-radius:10px;
}
.m1:before,
.m1:after {
content:'';
position:absolute;
left:50%;
margin-left:-8px;
border-right:8px solid transparent;
border-left:8px solid transparent;
}
.m1:before {
bottom:-20px;
border-top:20px solid #ccc;
}
.m1:after {
bottom:-18px;
border-top:20px solid #fee;
}
ボーダーがなければどちらか片方指定だけでいける。
/*css*/
.m2 {
position:relative;
display:inline-block;
padding:15px 40px;
background-color:#fee;
text-align:center;
border-radius:10px;
}
.m2:after {
content:'';
position:absolute;
left:50%;
margin-left:-8px;
border-right:8px solid transparent;
border-left:8px solid transparent;
bottom:-18px;
border-top:20px solid #fee;
}
空文字の上下左右にボーダー
/*css*/
.m4 {
position:relative;
}
.m4:after {
content:'';
position:absolute;
left:50%;
margin-left:-8px;
border-right:20px solid #888;
border-left:20px solid #888;
bottom:-18px;
border-top:20px solid #f00;
border-bottom:20px solid #00f;
}
空要素にボーダーを引くと上のような絵になる。
hoverと組み合わせる
.button {
display:block;
width:320px;
line-height:80px;
text-align: center;
text-decoration:none;
outline:none;
background-color:red;
border:2px solid red;
color:#fff;
position:relative;
z-index:0;
}
.button:hover {
background-color:#fff;
border-color:blue;
color:blue;
}
.button:before,
.button:after {
display:block;
content:'';
top:0;
width:30%;
height:100%;
background-color:purple;
position:absolute;
z-index:1;
}
.button,
.button:before,
.button:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition:all .3s;
transition:all .3s;
}
.button::before {
right:0;
}
.button::after {
left:0;
}
.button:hover:before,
.button:hover:after {
width:0;
background-color:green;
}
hoverした後の挙動が問題。
重なり順は、擬似要素が最前面、親要素がその下に配置。
擬似要素のbeforeとafterは共に、widthが30％で、親を基点（relative）として、beforeはright:0で絶対配置、afterはleft:0で絶対配置される。互いの合計幅は60％なので、中央に40％分だけ空きができる。
こいつら擬似要素はあとでtransitionプロパティを使ってwidth:0にしたいので、all .3sを指定。allはwidthでもよいし、.3sは0.3sでもよい。
hoverされると、再背面の親要素の背景は白くなり、枠線と文字が青くなるが、その前にその全面にある擬似要素のhoverが起こる。擬似要素はtransitionを指定しているので、width:30%→０までアニメーションで移動していく。
ちなみに、親のz-indexをautoにすると親が後が前に来てしまう。
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
