:after/::afterと:before/::beforeの違い

基本概念
1.彼らはすべてCSSの偽要素で、hover/:activeなどの偽類とは違います.2.:before/:after擬似要素はCSS 2で提案されているので、互換性はIE 8になる可能性があります.3.::before/::afterはCSS 3の表記であり、擬似クラスと擬似要素を区別するためである.しかし、普段は互換性のために、コロンの書き方をしています.
基本的な使い方

p:after{} 
img:before{}

この2つの擬似要素の下に特有の属性contentは、CSSレンダリングで要素論理上のヘッダまたは末尾にコンテンツを追加するために使用されます.これらの追加はドキュメントの内容を変更することはなく、DOMには表示されず、コピーできません.CSSレンダーレイヤのみで追加されます.使用できる値は次のとおりです.

[String]–引用符を使用して文字列を含めると、要素の内容に文字列が追加されます.例:a:after { content: "↗"; }

attr()–現在の要素のプロパティを呼び出します.たとえば、ピクチャのAltプロンプト文字やリンクのHrefアドレスを簡単に表示できます.例:a:after { content:"(" attr(href) ")"; }

url()/uri()–メディアファイルを参照します.例:h1::before { content: url(logo.png); }

counter()–リスト要素を使用せずにシーケンス番号機能を実現できるカウンタを呼び出します.詳細については、counter-incrementおよびcounter-resetプロパティの使用方法を参照してください.例:h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

ステップアップの使い方で私たちが最もよく使うのは、フローティングをクリアしたり、三角などの特殊な要素を作ったりすることです.現在一般的に使用されているフローティングをクリアする方法は、次のとおりです.

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

三角の作り方:

    .c-main:before{
    content: '';
    border-top: 9px solid transparent;/*            */
    border-bottom: 9px solid transparent;/*          */
    border-right: 9px solid #eee;/*      */
    position: absolute;/*    1*/
    top: 25px;/*         2*/
    left: -9px;/*         3*/ /*123         */
    }
    .c-main:after{
    content: '';
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fbfdfb;/*      ，     #eee  ，           */
    position: absolute;
    top: 27px;
    left: -7px;
    }

位置決めはすべて次で、主にborder設定を見ます.色がありながら、他の3辺は透明で実現できます.
参考記事:http://blog.dimpurr.com/css-before-after/