web-dev-qa-db-ja.com

:: after疑似要素に空の `content`プロパティが必要なのはなぜですか？

私は私が尋ねた前の質問から http://jsfiddle.net/8p2Wx/2/ を得ました、そして私はこれらの行を見ます：

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

content:""を削除すると、効果が台無しになり、なぜ必要なのかわかりません。

空のcontentを:afterおよび:before疑似要素に追加する必要があるのはなぜですか？

csspseudo-elementcss-content
24
qwertymk

そのコンテンツがどうあるべきかを定義せずに、生成されたコンテンツのスタイルを設定することはできません。コンテンツが本当に必要ない場合は、スタイルを設定するための追加の「非表示要素」のみを空の文字列（content: ''）に設定して、スタイルを設定できます。

これを自分で確認するのは簡単です： http://jsfiddle.net/mathias/YRm5V/

ちなみに、あなたが投稿したスニペットは、ここで説明されているマイクロクリアフィックスハックです： http://nicolasgallagher.com/micro-clearfix-hack/

2番目の質問については、一部の古いブラウザで<nav>をスタイル可能にするには、 HTML5 shiv （小さなJavaScript）が必要です。

25
Mathias Bynens

CSS仕様として。状態、：afterおよび：before疑似要素は、propの場合は生成されません。 contentが「通常」および「なし」以外の値に設定されていない： http://www.w3.org/TR/CSS2/generate.html#content

content初期値は「通常」であり、「通常」は：beforeおよび：after疑似要素の「なし」に計算されます。

4
luissquall

CSSにはcontentというプロパティがあります。これは、疑似要素：afterおよび：beforeでのみ使用できます。これは、疑似セレクター（コロン付き）のように書かれていますが、ページに存在するものを実際に選択するのではなく、ページに新しいものを追加するため、疑似要素と呼ばれます。

より良い説明はこれを見てください：

  1. Cssコンテンツ1
  2. Cssコンテンツ2

そしてnav要素は：

HTML 5の新しい要素の1つは、リンクをグループ化できるようにする要素です。これにより、セマンティックなマークアップとスクリーンリーダーに役立つ追加の構造が得られます。この記事では、その使用方法と使用場所、および仕様の定義に関する予約について説明します。

  1. HTML5タグ
0
Jack