0

ここからこのコードを取得しました：

div.grid:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

削除しても何も起こりません。だから、意味がありませんでした。

に基づいた多くのトリックを目にし:before、最近:after使用されています。私はこれを理解していると思ったので、尋ねました。

4

4 に答える 4

1

共有したコードを要求している場合は、フローティング要素をクリアします。たとえば、これがあるとします

デモ(:after疑似からセルフ クリアの親なし)

デモ 2 (:afterプロパティを使用して浮動要素をクリアする)

If you are asking specifically about :after than it's just like a virtual element. It just adds content after the element. You also have :before which will add content before instead. The pseudo generated content is inline by default.

This feature is really handy say when you want to add some content before or after the element, now you will say how is this really useful in real world, than consider this as 2 elements which you can just make act like a div by making it a block level like

div.class_name:before, 
div.class_name:after {
   display: block;
}

Will just save you 2 elements in DOM, I would like to share few links where I've used this feature to cut down HTML...

Answer Here - Demo

Answer Here - Demo

Answer Here - Demo

MDN Reference | Support

于 2013-10-05T15:13:04.347 に答える
1

この「clearfix」は疑似要素を生成し、それらの表示をテーブルに設定します。これにより、匿名のテーブルセルと新しいブロック書式設定コンテキストが作成されます。これは、:before 疑似要素が上部マージンの崩壊を防ぐことを意味します。:after 疑似要素は、フロートをクリアするために使用されます。その結果、生成されたコンテンツを非表示にする必要がなくなり、必要なコードの総量が削減されます。

フロートをクリアするために :before セレクターを含める必要はありませんが、最新のブラウザーで上部マージンが崩れるのを防ぎます。これには 2 つの利点があります。

1.overflow:hidden など、新しいブロック フォーマット コンテキストを作成する他のフロート コンテインメント手法との視覚的な一貫性を確保します。

2.zoom:1 適用時の IE 6/7 との視覚的な一貫性を保証します。

于 2013-10-05T15:13:43.887 に答える
0

:afterとともにcontent使用して、要素の後にコンテンツを追加できます。これを試して：

span:after {
    content: "world"
}

<span>Hello </span>

http://jsfiddle.net/d3M99/

于 2013-10-05T15:06:06.897 に答える
0

このコードはフロートをクリアするために使用され、 :before多く:afterの目的を果たすことができ、非常に便利です

たとえば、通貨に $ を追加したい場合

.currency:before{
   content :'$';
}

これにより、すべてのクラスの通貨に $ が追加されるため、多くの時間を節約できます。

このリソースのリンクをチェックしてください

于 2013-10-05T15:07:03.997 に答える