サイドスリーブログ

CSS疑似クラス 『::after と ::before』 を使いこなす!


                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で書けちゃうので便利ですよね♪
ぜひ、使ってみてくださいね~!

その他の Web制作ネタ帳 ブログ一覧