CSS pseudo-elementos
CSS pseudo-elemento se utiliza para agregar algunos selectores de efectos especiales.
gramática
sintaxis pseudo-elemento:
clases CSS también pueden utilizar pseudo-elementos:
: Primera línea pseudo-elemento
"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:
- propiedades de la fuente
- propiedades de color
- propiedades de fondo
- word-spacing
- espaciado entre letras
- text-decoration
- vertical-align
- text-transform
- line-height
- claro
: First-letter 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:
- propiedades de la fuente
- propiedades de color
- propiedades de fondo
- propiedades de los márgenes
- propiedades de relleno
- propiedades de los bordes
- text-decoration
- vertical-align (sólo si "flotar" es "ninguna")
- text-transform
- line-height
- flotador
- claro
Los pseudo-elementos y clases CSS
Pseudo-elementos se pueden combinar con clases CSS:
<p class="article">A paragraph in an article</p>
El ejemplo anterior hará toda clase que la primera letra del artículo párrafo se vuelve rojo.
Múltiples pseudo-elementos
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:
Ejemplos
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Trate »
CSS -: antes del pseudo-elemento
": 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>:
CSS -: después de pseudo-elemento
": 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>:
Todo CSS pseudo-clases / elementos
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 |