Зачем мне нужно пустое свойство `content` в:: после псевдоэлемента?

Я получил http://jsfiddle.net/8p2Wx/2/ из предыдущего вопроса, который я задал, и вижу следующие строки:

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

.cf:after {
    clear:both;
}

Если я уберу content:"", он разрушит эффект, и я не понимаю, зачем это нужно.

Зачем нужно добавлять пустые content to :after и :before псевдоэлементы?

Ответ 1

Вы не можете сгенерировать сгенерированный контент, не определяя, что это за контент. Если вам действительно не нужен контент, просто дополнительный "невидимый элемент" для стиля, вы можете установить его в пустую строку (content: '') и просто создать стиль.

Его легко подтвердить сами: http://jsfiddle.net/mathias/YRm5V/

Кстати, вы опубликовали фрагмент микрочипов, который объясняется здесь: http://nicolasgallagher.com/micro-clearfix-hack/

Что касается вашего второго вопроса, вам понадобится HTML5 shiv (небольшая часть JavaScript), чтобы сделать <nav> стиль в некоторых старых браузерах.

Ответ 2

Как спецификация CSS. state:: after и: перед псевдоэлементами не генерируются, если prop. content не установлено значение, отличное от 'normal' и 'none': http://www.w3.org/TR/CSS2/generate.html#content

content начальное значение является "нормальным", а "normal" вычисляет "none" для: before и: after псевдоэлементов.

Ответ 3

CSS имеет свойство, называемое содержимым. Его можно использовать только с псевдоэлементами: after и: before. Он написан как псевдоселектор (с двоеточием), но он называется псевдоэлементом, потому что он фактически не выбирает ничего, что существует на странице, но добавляет что-то новое на страницу

см. это для лучшего объяснения:

а элемент nav:

Один из новых элементов для HTML 5 - это элемент, который позволяет группировать ссылки, что приводит к большей семантической разметке и дополнительной структуре, которая может помочь прокрутчикам. В этой статье я расскажу, как и где ее использовать, а также некоторые оговорки, которые у меня есть с определением спецификаций.

Html5 TAGS