- Web制作ネタ帳
writer / むーみん
CSS疑似クラス 『::after と ::before』 を使いこなす！
webデザイナーのむーみんです。 コーディングでよく見るけどなかなか理解していなかったり、 自分で使用しにくいクラスってありませんか？ そんな、中の一つで以外に知らない人もいる::before ::afterの あなたも思わず積極的に使いたくなる、便利な使い方をご紹介します。
対応ブラウザ
| Chrome | ○ |
|---|---|
| Firefox | ○ |
| Safari | ○ |
| Opera | ○ |
| IE6 | |
| IE7 | |
| IE8+ | ○ |
「::before」「::after」って何？
意味はそのままで、beforeは前。afterは後ろに、スタイル要素を適用できるということ！
よく見るのが、
clearfix::after{}
上記は、よく使用したりしていましたよね。今も使用している人は多いのではないでしょうか。
HTML
<ul class="memo">
<li>1これは、注意書き1番目です</li>
<li>2これは、注意書き2番目です</li>
</ul>
CSS
ul {
width:960px;
margin:0 auto;
}
ul li {
float:left;
width:240px;
}
.clearfix::after{
content:"";
clear:both;
overflow:hidden;
}
これは、リストの最後にフロートの解除をしてくださいねという意味ですよね。
という感じで使っていきます★
また、CSS3では、::after ::before コロンを2つ付けます。
CSS2で導入された:afterも、多くのブラウザで使えます。
リストに使おう！その1
リストのアイコンを記号にしたい場合に使えます！
- 1これは、注意書き1番目です
- 2これは、注意書き2番目です
HTML
<ul class="memo">
<li>1これは、注意書き1番目です</li>
<li>2これは、注意書き2番目です</li>
</ul>
CSS
ul.memo li {
list-style: none;
}
ul.memo li::before {
content: "※";
padding-right: 5px;
color: red;
}
リストに使おう！その2
アイコンをHTMLに書き込まなくても大丈夫なんです！
お知らせに使えます！
- お知らせ1番目です
- お知らせ2番目です
HTML
<ul class="news">
<li class="new">お知らせ1番目です</li>
<li class="pdf">お知らせ2番目です</li>
</ul>
CSS
.news {
list-style: none;
}
.news .new::after {
content: "new";
margin-left: 5px;
color: #fff;
background: red;
padding: 1px 3px;
font-size:12px;
}
.news .pdf::after {
content: "PDF";
margin-left: 5px;
color: red;
border:1px solid red;
padding: 1px 3px;
font-size:12px;
}
タイトルに使おう！
装飾にも使えるので、とても便利です！
これは、タイトルです
HTML
<h2>これは、タイトルです。</h2>
CSS
h2 {
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #B61C2C;
}
h2::before,
h2::after {
position: absolute;
content: '';
border-radius: 100%
}
h2::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background: rgba(203, 162, 164, .5);
}
h2::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: rgba(182, 28, 44, .5);
}
まだまだ、使えることが沢山あります！
ちょっとアイコンを簡単に作りたい時や、HTMLをシンプルにしたい時にCSSで書けちゃうので便利ですよね♪
ぜひ、使ってみてくださいね～！
