El mejor tutorial de CSS pseudo-elementos en 2024. En este tutorial podrás aprender gramática,: Primera línea pseudo-elemento,Ejemplos,: First-letter pseudo-elemento,Ejemplos,Los pseudo-elementos y clases CSS,Múltiples pseudo-elementos,Ejemplos,CSS -: antes del pseudo-elemento,Ejemplos,CSS -: después de pseudo-elemento,Ejemplos,Todo CSS pseudo-clases / elementos,
CSS pseudo-elemento se utiliza para agregar algunos selectores de efectos especiales.
sintaxis pseudo-elemento:
clases CSS también pueden utilizar pseudo-elementos:
"De primera línea" pseudo-elemento se utiliza para establecer un estilo especial a la primera línea de texto.
En el siguiente ejemplo, el navegador se basa en pseudo-elemento de "primera línea" en el estilo de la primera línea de texto formato de los elementos t:
Nota: "de primera línea" pseudo-elemento sólo se puede utilizar para los elementos a nivel de bloque.
NOTA: Las siguientes propiedades se pueden aplicar a la "primera línea" pseudo-elemento:
"En primer lugar-letra" pseudo-elemento se utiliza para establecer un estilo especial a la primera letra del texto:
Nota: "first-letter" pseudo-elemento sólo se puede utilizar para los elementos a nivel de bloque.
NOTA: Las siguientes propiedades se pueden aplicar a la "primera letra" pseudo-elemento:
Pseudo-elementos se pueden combinar con clases CSS:
El ejemplo anterior hará toda clase que la primera letra del artículo párrafo se vuelve rojo.
Una pluralidad de pseudo-elementos se pueden combinar para usar.
En el siguiente ejemplo, el primer párrafo de la letra se mostrará en rojo, el tamaño de fuente es XX-Large. La primera línea del resto del texto será de color azul, y las pequeñas letras mayúsculas.
Los párrafos siguientes del texto en el tamaño de fuente predeterminado y el color de la pantalla:
": Antes de" pseudo-elemento puede insertar nuevo contenido en frente del contenido del elemento.
En el siguiente ejemplo para insertar una imagen en frente de cada elemento <h1>:
": Después de" pseudo-elemento puede insertar nuevo contenido después de que el contenido del elemento.
Los siguientes ejemplos insertar una imagen después de cada elemento <h1>:
selector | ejemplo | El ejemplo muestra |
---|---|---|
: enlace | a:link | Seleccionar todos los enlaces no visitados |
: visited | a:visited | Seleccionar todos los enlaces visitados |
: activa | a:active | Select es un enlace activo |
: hover | a:hover | Ponga el ratón sobre el estado del enlace |
: enfoque | input:focus | Después de seleccionar el elemento de entrada tiene enfoque |
: First-letter | p:first-letter | Seleccione la primera letra de cada elemento <p> |
: First-line | p:first-line | Seleccione la primera línea de cada elemento <p> |
: First-child | p:first-child | <] P> selector de elementos coincide con cualquier elemento que pertenece al primer elemento secundario |
: antes | p:before | Insertar contenido antes de cada elemento <p> |
: después de | p:after | Insertar contenido después de cada elemento <P> |
: Lang (idioma) | p:lang(it) | selección de atributos lang <p> elemento a un valor de inicio |