css - ejemplos - ¿Por qué necesito una propiedad `content` vacía en un:: after pseudo-element?

css after before ejemplos

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Por qué los elementos: antes y después de los pseudo-elementos requieren una propiedad ''contenido''? 4 respuestas

http://jsfiddle.net/8p2Wx/2/ de una pregunta anterior que hice y veo estas líneas:

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

Si quito el content:"" , arruina el efecto y no entiendo por qué es necesario.

¿Por qué es necesario agregar un content vacío a :after y :before pseudo-elementos?

Answer 1

CSS tiene una propiedad llamada contenido. Solo se puede utilizar con los pseudo elementos: después y: antes. Está escrito como un pseudo selector (con los dos puntos), pero se llama un pseudo elemento porque en realidad no selecciona nada de lo que existe en la página, sino que agrega algo nuevo a la página.

ver esto para una mejor explicación:

1. Contenido css 1
2. Contenido css 2

y el elemento de navegación es:

Uno de los nuevos elementos para HTML 5 es el elemento que le permite agrupar enlaces, lo que da como resultado un mayor marcado semántico y una estructura adicional que puede ayudar a los lectores de pantalla. En este artículo analizaré cómo y dónde usarlo, así como algunas reservas que tengo con la definición de las especificaciones.

1. Html5 TAGS

Answer 2

Como la especificación de CSS. estados,: después y: antes de que los pseudo elementos no se generen si prop. content no se establece en un valor distinto de ''normal'' y ''ninguno'': http://www.w3.org/TR/CSS2/generate.html#content

el valor inicial del content es ''normal'' y ''normal'' se calcula como ''ninguno'' para los: pseudo-elementos: antes y después.

Answer 3

No puede aplicar estilo al contenido generado sin definir cuál debe ser ese contenido. Si realmente no necesita ningún contenido, solo un "elemento invisible" adicional al estilo, puede configurarlo en la cadena vacía ( content: '''' ) y simplemente darle estilo.

Esto es fácil de confirmar: http://jsfiddle.net/mathias/YRm5V/

Por cierto, el fragmento que publicaste es el hack de micro clearfix, que se explica aquí: http://nicolasgallagher.com/micro-clearfix-hack/

En cuanto a tu segunda pregunta, necesitarás un código HTML5 (pequeño fragmento de JavaScript) para hacer que <nav> estable en algunos navegadores más antiguos.