Pseudo-Elementos
Los pseudo-elementos son clases creadas en base a elementos comunes, por lo que no es posible (por medios normales) crear un pseudo-elemento sin uno, estos se distinguen de los elementos comunes ya que algunos requieren del uso de la etiqueta content, estos elementos, no forman parte del DOM, sin embargo sí generan cambios visuales en la página web, por lo tanto su empleación no afectará al DOM, por otra parte también existen otros pseudo-elementos que sí forman parte del DOM como ::first-line y ::first-letter, los cuales no requieren del uso de la etiqueta content.
Nota: los dobles dos puntos (::) ubicados antes del nombre de la propiedad forman parte de la sintaxis de los pseudo-elementos.
Los tipos de pseudo-elementos son:
::first-line
-
La función de este es aplicar un estilo a la primera línea de un texto, puede sonar muy simple, sin embargo lo que verdaderamente ofrece este es aplicar el estilo adaptándose al elemento, o a la parte de este que cumpla con dicha característica, todo esto según las dimensiones de la pantalla, el tipo de dispositivo etc.
De este modo podemos definir que únicamente la porción del texto que se visualiza en esta línea posea un estilo en específico, sin recurrir a scripts de JavaScript
Ejemplo
Código:
Resultado
Este código resulta en que únicamente a la porción de texto ubicada en la primera línea se le aplicarán los estilos definidos, esto sin importar desde qué dispositivo o pantalla se muestren ya que estos se ajustarán para cubrir una mayor o menor porción del texto.
Una particularidad de esta propiedad es que no funciona en los elementos inline, sin embargo sí lo hace en cualquiera de los otros tipos de elementos.
::first-letter
-
Se trata de un pseudo-elemento muy similar a first-line, diferenciándose en que su efecto se limita únicamente a la primera letra del texto en cuestión.
Ejemplo
Código:
Resultado:
Nota: first-letter tampoco se puede aplicar a los elementos inline
::placeholder
-
Este pseudo-elemento cumple con la función de asignar estilos para el texto almacenado en el atributo placeholder de un elemento input de tipo text, en sí esta es la única función de este pseudo-elemento.
Ejemplo
Nota: El atributo placeholder es en el que se define el texto por defecto que se muestra en un input, y desaparece cuando el usuario escribe en este.
Ejemplo
::selection
-
La función de este pseudo-elemento es la de aplicar los estilos a todo aquel texto que sea seleccionado por el usuario, los estilos por defecto de los navegadores son un background azul y letras blancas, pero con este pseudo-elemento es posible aplicar las características que se deseen a la selección de texto realizada por el usuario.
Una de las características de esta propiedad es que únicamente puede comportarse como un elemento de línea, por lo que únicamente acepta propiedades de estos.
Ejemplo
Estilos por defecto
Código:
Resultado:
::before y ::after
-
Estos dos pseudo-elementos cumplen con funciones muy similares, su efecto es el de mostrar un texto alrededor de un texto HTML, y para hacerlo realmente crean un elemento hijo, es decir:
Por lo tanto estos textos creados con pseudo-elementos no forman parte del DOM, de hecho para su funcionamiento dependen de la propiedad content, en la cual se almacena el texto que será mostrado en el elemento hijo, al tratarse de pseudo-elementos CSS lógicamente estas propiedades pueden almacenar cualquier propiedad de un elemento lineal.
Nota: Una característica de estos pseudo-elementos es que funcionan tanto en elementos de línea como elementos de bloque.
Ejemplo
HTML
Código:
Resultado:
