nth - pseudo elementos css ejemplos
¿Por qué los elementos: antes y después de los pseudo-elementos requieren una propiedad de ''contenido''? (4)
Aquí hay algunas referencias a varias especificaciones y borradores de W3C:
Selectores Nivel 3
Los pseudo-elementos '': before'' y '': after'' pueden usarse para insertar contenido generado antes o después del contenido de un elemento.
Los: antes y después de los pseudo-elementos.
Los autores especifican el estilo y la ubicación del contenido generado con: antes y: después de los pseudo-elementos. Como lo indican sus nombres, el: antes y: después de los pseudo-elementos especifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento. La propiedad ''contenido'', junto con estos pseudo-elementos, especifica qué se inserta.
El atributo de contenido
Inicial: ninguno
Esta propiedad se utiliza con: antes y: después de pseudo-elementos para generar contenido en un documento. Los valores tienen los siguientes significados:
none : el pseudo-elemento no se genera.
El estilo aplicado a :: before y :: after pseudo-elements afecta la visualización del contenido generado. El atributo de content es este contenido generado, y sin que esté presente, el valor predeterminado del content: none se asume, lo que significa que no hay nada para el estilo que se aplicará.
Si no quieres repetir el content:''''; varias veces, puede anular esto simplemente con un estilo global de todos :: antes y :: después de pseudo-elementos dentro de su CSS ( ejemplo de JSFiddle ):
::before, ::after {
content:'''';
}
Dado el siguiente escenario, ¿por qué el: después del selector requiere una propiedad de contenido para funcionar?
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
}
<div class="test"></div>
Observe cómo no ve el pseudo elemento hasta que especifique la propiedad de contenido:
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
content:"hi";
}
<div class="test"></div>
¿Por qué es esta la funcionalidad prevista? Usted pensaría que el bloque de visualización forzaría el elemento a aparecer. Por extraño que parezca, puedes ver los estilos dentro de los depuradores web; sin embargo, no se muestran en la página.
Basado en sus comentarios sobre las respuestas de otros, creo que su pregunta es en realidad:
¿Por qué la propiedad de contenido para las pseudo-clases debe establecerse en el CSS, a diferencia del contenido de las no-pseudo-clases, que pueden establecerse en HTML o CSS?
La razón es que:
- por definición, las pseudo-clases se crean dinámicamente para cada elemento individual especificado por el marcado HTML de una página
- todos los elementos de la página, incluidas las pseudo-clases, deben tener una propiedad de contenido para mostrarse.
- Los elementos HTML como
<p>hacen, pero puede establecer su propiedad de contenido rápidamente usando el marcado ( o con declaraciones CSS). - Howver, a diferencia de los elementos que no son de pseudo-clase , las pseudo-clases no pueden recibir valores en el mismo marcado.
∴ Por lo tanto, todas las pseudo-clases son invisibles (sus propiedades de ''contenido'' no tienen valor) a menos que usted les diga que no lo hagan (dándoles valor con las declaraciones de CSS).
Toma esta simple página:
<body>
<p> </p>
</body>
Sabemos que esta página no mostrará nada, porque el elemento <p> no tiene texto. Una forma más precisa de reformular esto es que la propiedad de contenido del elemento <p> no tiene valor .
Podemos cambiar esto fácilmente, configurando la propiedad de contenido del elemento h1 en el formato HTML :
<body>
<p>This sentence is the content of the p element.</p>
</body>
Esto ahora se mostrará cuando esté cargado, porque la propiedad de contenido del elemento <p> tiene un valor; ese valor es una cadena:
"This sentence is the content of the p element."
Alternativamente, podemos hacer que se muestre el elemento <p> configurando la propiedad de contenido del elemento <p> en el CSS :
p { content: "This sentence is the content of the p element set in the CSS."; }
Estas dos formas de inyectar la cadena en el elemento <p> son idénticas.
Ahora, considera hacer lo mismo con las pseudo-clases:
HTML:
<body>
<p class="text-placeholder">P</p>
</body>
CSS:
p:before { content: "BEFORE... " ; }
p:after { content: " ...and AFTER"; }
El resultado:
BEFORE... P ...and AFTER
Finalmente, imagina cómo lograrías este ejemplo sin usar CSS. Es imposible, porque no hay manera de establecer el contenido de la pseudo-clase en el formato HTML.
Podrías ser creativo e imaginar que algo como esto podría funcionar:
<p:before>BEFORE... </p>
<p> P </p>
<p:after> ...and AFTER</p>
Pero no lo hace, porque <p:before> y <p:after> no son elementos HTML .
En conclusión:
- Existen pseudo clases para cada elemento de marcado.
- Son invisibles por defecto, porque están inicializados sin propiedad de contenido.
- NO PUEDES establecer la propiedad de contenido para las pseudo clases con el marcado HTML.
∴ Por lo tanto, la propiedad de contenido de pseudo-elementos debe ser declarada con declaraciones CSS para que se muestre.
Hasta que agregue content: ... , el elemento psuedo en realidad no existe .
Establecer otras propiedades de estilo no es suficiente para forzar al navegador a crear el elemento.
La razón por la que necesita una declaración de content: '''' para cada ::before y / o ::after pseudo-elemento es porque el valor inicial del content es normal , que se calcula en none en los ::before y ::after pseudo-elementos . Ver la spec .
La razón por la que el valor inicial del content no es una cadena vacía, sino un valor que se calcula en none para el ::before y ::after pseudo-elementos, es doble:
Tener contenido en línea vacío al comienzo y al final de cada elemento es bastante tonto. Recuerde que el propósito original de los elementos
::beforey::afterpseudo elementos es insertar el contenido generado antes y después del contenido principal de un elemento originario. Cuando no hay contenido para insertar, crear un cuadro adicional solo para insertar nada no tiene sentido. Por lo tanto, el valor denoneestá ahí para decirle al navegador que no se moleste en crear un cuadro adicional.La práctica de usar empty
::beforey::afterpseudo-elements para crear cuadros adicionales con el único propósito de la estética del diseño es relativamente nueva, y algunos puristas incluso pueden llegar a llamarlo hack por este motivo.Tener contenido en línea vacío al comienzo y al final de cada elemento significa que cada elemento (no reemplazado), incluidos
htmlybody, generaría por defecto no una caja, sino hasta tres casillas (y más en el caso de elementos que ya generar más que solo el cuadro principal, como elementos con estilos de lista). ¿Cuántas de las dos cajas adicionales por elemento realmente usarás? Eso es potencialmente triplicar el costo de diseño para muy poca ganancia.De manera realista, incluso en esta década, menos del 10% de los elementos de una página necesitarán
::beforey::afterpseudo-elementos para el diseño.
Y así, estos pseudo-elementos se convierten en opcionales, ya que hacerlos optar por no es solo un desperdicio de recursos del sistema, sino que simplemente es ilógico dado su propósito original. La razón de rendimiento también es la razón por la que no recomiendo generar pseudo-elementos para cada elemento usando ::before, ::after .
Pero entonces puede preguntar: ¿por qué no tener la propiedad de display predeterminada en none en ::before, ::after ? Simple: porque el valor inicial de display no es none ; esta en inline Tener en inline calcular a none en ::before, ::after no es una opción porque nunca podría mostrarlos en línea. Tener el valor inicial de display be none en ::before, ::after no es una opción porque una propiedad solo puede tener un valor inicial. (Esta es la razón por la que el valor inicial del content es siempre normal y se define simplemente para calcular a none en ::before, ::after ).