:before と :after および疑似クラスの概要 (翻訳済み)_html/css_WEB-ITnose

---------------------------------------------- --- --------------------------------------------------- --- -----------------------------------

疑似クラスVS 擬似要素

この 2 つの概念は混同されやすいため、Google で検索したり、W3C の情報を確認したりしても理解できない場合があります。答えは実際には次のように非常に簡単です:

疑似クラス: アクション オブジェクトは要素全体です

まず、いくつかの疑似クラスを見てみましょう

a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}

ご覧のとおり、これらの条件はありますが、 DOM に基づいていないため、結果は常に 1 がリンク全体、段落、div などの完全な要素に適用されます。

疑似要素: 要素の一部に作用します

いくつかの例を見てみましょう:

p::first-line {color: #555}p::first-letter {color: #666}a::before {content : "hello world";}

ご覧のとおり、疑似要素は要素の一部、つまり要素の最初の行または最初の文字に作用します。段落

さらに驚くべきことは、HTML に追加されていないオブジェクト (:before と :after) に作用できることです。これがこの記事の内容です。

:before VS ::before

なぜ 2 つの書き方があるのですか?同じ効果がありますか?

答えは同じです。例を見てみましょう:

/*CSS2*/.example:before {}.example:after {}.example:first-child {}  /*CSS3*/.example::before {}.example::after {}.example::first-child {}

CSS2 では、疑似クラスと疑似要素を表すためにコロンを使用します。ただし、既存の 2 つを区別するために、CSS3 は 疑似要素 用に 2 つのコロンを特別に設計しました。

IE は再びすべてを台無しにしました

最近のブラウザはすべて :: 構文をサポートしていますが、悲劇的な IE8 はそれをサポートしていません。ほとんどの開発者は IE との互換性を保つために CSS2 の : を使用しています。シンプルで一貫性を保つために、この記事の残りの部分では CSS2 形式を使用します。

.phoneNumber:before {    content: "?";    font-size: 15px;}

.phoneNumber:after {    content: "$#9742";    font-size: 15px;}

簡潔な例

.button {

x ;

ボーダー半径: 100px;

- webkit-box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );

-moz-box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );

box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 ); /*ばかげたグラデーション構文*/

背景: #e51d16 ; / * 古いブラウザ */

背景: -moz -linear-gradient( top , #e51d16 0% , #b21203 100% ); /* FF3.6+ */

背景 : -webkit-gradient(linear, left top); , 左下 , color-stop( 0% , #e51d16 ), color-stop (100%, #b21203)); /* Chrome,Safari4+ */

background : -webkit-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* Chrome10+,Safari5.1+ */

background : -o-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* Opera 11.10+ */

background : -ms-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* IE10+ */

background : linear-gradient( top , #e51d16 0% , #b21203 100% ); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#e51d16' , endColorstr= '#b21203' ,GradientType= 0 ); /* IE6-9 */

}

效果如下：

现在，我们需要在按钮的外围添加一层稍暗的区域，并且给它一个内阴影效果，看起来就像是嵌入的一样。这次，我们不用添加额外的标签，只需要用一个空的伪元素。

.button:before {    content:"";}

现在我们开始实现想要的效果。

.button:before {    content:"";    width: 100%;    height: 100%;    display: block;    z-index: -1;    position: relative;    padding: 15px;    background: #ddd;    left: -15px;    top: -15px;    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}

现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1，使它位于按钮的下方，并且使用相对定位校正位置。

接下来，我们又想加一层同样的效果。这一次，我们使用 :after

.button:after {    content:"";    width: 100%;    height: 100%;    display: block;    z-index: -2;    position: relative;    padding: 25px;    background: #eee;    position: absolute;    left: -25px;    top: -25px;    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}

效果如下：　

通过 :before 和 :after 你还能做什么？

使用很广泛，下面给出几个比较流行的例子

清除浮动

CSS的浮动很让人头痛，世界各地的开发者都在寻找更好的解决方法。

Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个，即利用 :before 和 :after 清除浮动。

/* For modern browsers */.cf:before,.cf:after {    content:"";    display:table;}  .cf:after {    clear:both;}  /* For IE 6/7 (trigger hasLayout) */.cf {    zoom:1;}

这里 :before 阻止了 top-margin 合并， :after则用于清除浮动，这种方法做的极为干净漂亮。

你也许会说还有 overflow: hidden; 方式呢！当然这也是一种可选方案，当你发现overflow不合适的时候，可以选择这里提到的方式。

CSS图形

使用纯CSS实现某些复杂的图形是不是很有趣？通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。

CSS3Shapes.com 有很多例子，这里就举一个八边形的例子。

#octagon {   width: 100px;   height: 100px;   background: blue;}  #octagon:before {   height: 0;   width: 40px;   content:"";   position: absolute;   border-bottom: 30px solid blue;   border-left: 30px solid white;   border-right: 30px solid white; }  #octagon:after {   height: 0;   width: 40px;   content:"";   position: absolute;   border-top: 30px solid blue;   border-left: 30px solid white;     border-right: 30px solid white;    margin: 70px 0 0 0;}

可以看到，通过定位、设置border，我们就能把一些简单的形状组合成复杂的图形，相当的酷！