CSS => Pseudoelementos

Introducción

Los pseudo-elementos, al igual que las pseudo-clases, se agregan a los selectores de CSS, pero en lugar de describir un estado especial, le permiten ubicar y diseñar ciertas partes de un elemento html.

Por ejemplo, el :: pseudo-elemento de primera letra se dirige solo a la primera letra de un elemento de bloque especificado por el selector.

Sintaxis

selector :: pseudo-elemento {propiedad: valor}

Parámetros

pseudo-elemento	Descripción
`::after`	Insertar contenido después del contenido de un elemento.
`::before`	Insertar contenido antes del contenido de un elemento.
`::first-letter`	Selecciona la primera letra de cada elemento.
`::first-line`	Selecciona la primera línea de cada elemento.
`::selection`	Coincide con la parte de un elemento que es seleccionado por un usuario
`::backdrop`	Se utiliza para crear un fondo que oculta el documento subyacente para un elemento en la pila de la capa superior
`::placeholder`	Le permite aplicar estilo al texto del marcador de posición de un elemento de formulario (Experimental)
`::marker`	Para aplicar atributos de estilo de lista en un elemento dado (Experimental)
`::spelling-error`	Representa un segmento de texto que el navegador ha marcado como incorrectamente escrito (Experimental)
`::grammar-error`	Representa un segmento de texto que el navegador ha marcado como gramaticalmente incorrecto (Experimental)

Observaciones

Usted verá a veces dos puntos dobles ( :: ) en lugar de sólo uno ( : ). Esta es una manera de separar pseudo-clases de pseudo-elementos, pero algunos navegadores antiguos como Internet Explorer 8 sólo es compatible con el colon solo ( : ) para los pseudo-elementos.
Uno puede usar solo un pseudo-elemento en un selector. Debe aparecer después de los selectores simples en la declaración.
Los pseudo-elementos no son parte del DOM, por lo tanto, no son direccionables por :hover u otros eventos de usuario.

Pseudoelementos

Los pseudo-elementos se agregan a los selectores, pero en lugar de describir un estado especial, le permiten diseñar ciertas partes de un documento.

El atributo de content es necesario para que los pseudo-elementos se representen; sin embargo, el atributo puede tener un valor vacío (por ejemplo, content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudo-elementos en las listas

Los pseudo-elementos se usan a menudo para cambiar el aspecto de las listas (principalmente para listas desordenadas, ul ).

El primer paso es eliminar las viñetas de lista predeterminadas:

ul {
  list-style-type: none;
}

A continuación, agregue el estilo personalizado. En este ejemplo, crearemos cuadros de degradado para viñetas.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Resultado

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Pseudoelementos

Buscar..