Entendiendo el pseudo-elemento antes y después
La hoja de estilo en cascada (CSS) está pensada principalmente para aplicar estilos a la marca HTML, sin embargo, en algunos casos cuando agregar una marca adicional al documento es redundante o no es posible, en realidad hay una función en CSS que nos permite agregar una marca adicional sin interrumpir el documento actual, a saber, el pseudo-elementos.
Has oído hablar de este término, especialmente cuando has estado siguiendo algunos de nuestros tutoriales..
En realidad, hay algunos miembros de la familia CSS que se clasifican como pseudo-elementos tales como el :primera linea, :primera letra, ::selección, :antes de y :después. Pero, para este artículo, limitaremos nuestra cobertura solo a los :antes de y :después, “pseudo-elementos” Aquí se referirá específicamente a ambos. Vamos a ver este tema en particular desde lo básico..
La sintaxis y el soporte del navegador
los pseudo-elementos en realidad han estado alrededor desde CSS1, pero el :antes de y :después que estamos discutiendo aquí fueron lanzados en CSS2.1. Al principio, el pseudo-elementos use un-colon para la sintaxis, luego a medida que la web evolucionó, en CSS3 la pseudo-elementos fueron revisados para usar el doble colon - convirtiéndose ::antes de Y ::después - para distinguirlo con pseudo-clases (es decir. :flotar, :activo, y así).
Sin embargo, ya sea que use el formato de una sola coma o de la doble coma, los navegadores seguirán reconociendo cualquiera de los dos. Y como Internet Explorer 8 solo es compatible con el formato de una sola coma, es más seguro utilizar una única coma si desea una mayor compatibilidad con el navegador..
Qué hace?
En resumen, la pseudo-elementos insertará un elemento extra antes de o después El elemento del contenido, por lo que cuando los agregamos a ambos, son técnicamente iguales, con el siguiente marcado.
:antes de Este es el contenido principal.. :después
Pero esos elementos no se generan realmente en el documento. Todavía son visibles en la superficie, pero no los encontrará en la fuente del documento, por lo que prácticamente hablando son falso elementos.
Usando pseudo-elementos
Utilizando pseudo-elementos es relativamente fácil; la siguiente sintaxis selector: antes agregará un elemento antes de El selector de contenido mientras esta sintaxis selector: despues Lo agregaremos después, y para agregar un contenido dentro de ellos podemos usar el contenido propiedad.
Por ejemplo, el fragmento a continuación agregará una comilla antes y después del blockquote.
blockquote: before content: open-quote; blockquote: after content: close-quote;
Estilo pseudo-elementos.
A pesar de ser un elemento falso, el pseudo-elementos en realidad actuar como un “real” elemento; Podemos agregar cualquier declaración de estilos sobre ellos, como cambiar el color, agregar fondo, ajustar el tamaño de la fuente, alinear el texto en su interior, etc..
blockquote: before content: open-quote; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; fondo: #ddd; flotador izquierdo; posición: relativa; superior: 30px; blockquote: after content: close-quote; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; fondo: #ddd; flotar derecho; posición: relativa; abajo: 40px;
Especificando la dimensión
Los elementos generados son por defecto un elemento de nivel en línea, por lo que cuando estamos a punto de especificar el alto y el ancho, primero debemos definirlo como un elemento de bloque utilizando el bloqueo de pantalla declaración.
blockquote: before content: open-quote; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; fondo: #ddd; flotador izquierdo; posición: relativa; superior: 30px; radio del borde: 25px; / ** definirlo como un elemento de bloque ** / display: bloque; altura: 25px; ancho: 25px; blockquote: after content: close-quote; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; fondo: #ddd; flotar derecho; posición: relativa; abajo: 40px; radio del borde: 25px; / ** definirlo como un elemento de bloque ** / display: bloque; altura: 25px; ancho: 25px;
Adjuntar imagen de fondo
También podemos reemplazar el contenido con una imagen en lugar de solo texto simple. Aunque el contenido propiedad proporciona una url () cadena para insertar una imagen, pero en la mayoría de los casos prefiero usar el fondo Propiedad para mayor control sobre la imagen adjunta..
blockquote: antes de contenido: ""; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; flotador izquierdo; posición: relativa; superior: 30px; radio del borde: 25px; fondo: url (images / quotationmark.png) -3px -3px #ddd; bloqueo de pantalla; altura: 25px; ancho: 25px; blockquote: after content: ""; tamaño de letra: 24 puntos; text-align: center; altura de la línea: 42px; color: #fff; flotar derecho; posición: relativa; abajo: 40px; radio del borde: 25px; fondo: url (images / quotationmark.png) -1px -32px #ddd; bloqueo de pantalla; altura: 25px; ancho: 25px;
Sin embargo, como puede ver en el fragmento anterior, todavía estamos declarando el contenido propiedad y esta vez con una cadena vacía. los contenido la propiedad es un requerimiento y siempre debe ser aplicado; de lo contrario el pseudo-elemento no trabajará lo que.
Combinando con pseudo-clases.
Aunque son un tipo diferente de seudo, podemos usar el pseudo-clases junto con pseudo-elementos juntos en una regla CSS, por ejemplo, si queremos convertir el comillas de fondo un poco más oscuro cuando nos movemos sobre el blockquote.
blockquote: hover: after, blockquote: hover: before background-color: # 555;
Adición de efecto de transición
E incluso podemos aplicar el transición propiedad sobre ellos para crear un efecto de transición de color elegante.
transición: todos los 350ms; -o-transición: todos los 350ms; -moz-transición: todos los 350ms; -webkit-transición: todos los 350ms;
Sin embargo, desafortunadamente, el efecto de transición parece funcionar solo en la última versión de Firefox. Con suerte, más navegadores se pondrán al día para permitir que la propiedad de transición se aplique en pseudo-elementos en el futuro.
- Manifestación
- Descargar fuente
Más inspiración
Para inspirarte, hemos seleccionado tres ejemplos geniales que pueden darte ideas para tu diseño web.
Sombras fascinantes
En este tutorial, Paul Underwood explicó cómo crear un efecto de sombra más realista y fascinante usando :antes de y :después pseudo-elementos. Ambos están posicionados absolutamente y colocados en la parte trasera con negativo índice z valor.
Efecto de imagen apilada
Utilizando la pseudo-elementos para crear un efecto de imagen apilada desordenada solo con una sola imagen en el marcado también es posible. los pseudo-elementos se utiliza para crear una ilusión de las imágenes apiladas en la parte posterior de la imagen real con negativo índice z.
Conclusión
PAGseudo-elementos es simple “guay” Y finalmente utilizable, básicamente tenemos dos elementos extra por cada elemento que agregamos sin interferir en absoluto con la estructura HTML real, y luego convertirlos en casi todo lo que podamos imaginar.
En realidad hay algunas mejoras para pseudo-elementos que se está trabajando actualmente, como pseudo-elementos de anidación div :: before :: before content: "; y pseudo-elementos multiples div :: before (3) content: "; Lo que obviamente abrirá muchas más posibilidades en la práctica del diseño web en el futuro. Mientras se implementan en los navegadores actuales, esperemos pacientemente por ahora.
