Pseudo-clases y pseudo-elementos en las animaciones

Una nota importante con la pseudo clase hover es que hay dispositivos a los que no se le puede hacer hover porque no tienen puntero (siendo los celulares el ejemplo más claro) y es posible que añadirle estilos que dependan de un hover pueda ser contraproducente para la funcionalidad de estos elementos.
.
Lo bueno es que ahora CSS tiene un media query llamado hover que permite agregarle estilos solamente en dispositivos que permiten hacer hover.
.
Por ejemplo si tenemos algún tag a que queremos que al hacer hover tenga un background-color distinto pero sólo queremos que pase en equipos que acepten hover podríamos usar esta línea de código:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

Es importante tener esto en cuenta por ejemplo en caso de que hagamos una card que sólo muestra el contenido completo si haces hover sobre esta. Esto obviamente no sería posible desde un celular, entonces lo que se haría sería dejar todas las propiedades de la card sin animaciones y en el media query de hover poner todo lo respecto a su animación para que pueda ser accesible a través de un celular o una tablet sin problemas.

También es bueno tener en cuenta que las pseudo-clases y los pseudo-elementos son distintos entre sí, ambos se escriben como una extensión de nuestro selector después de dos puntos: :hover, after; sin embargo, una pseudo-clase es básicamente un estado que podemos manipular, por ejemplo, el estado hover, el estado active, el estado visited, etc.
.
Un pseudo-elemento, como su nombre lo dice, es un elemento que no está declarado explícitamente desde nuestro HTML, pero lo podemos crear con CSS, por ejemplo before y after, ¿cómo sabes que es un pseudo-elemento y no una pseudo-clase? ¡Fácil! Simplemente preguntate: ¿existe el estado before? Verás que la respuesta es “no”, no existe ningún estado before porque este es un pesudo-elemento, por el contrario, si te preguntas: ¿existe el estado :hover? Aquí la respuesta es “sí”, porque hover sí es una pseudo-clase 😄
.
En este link puedes encontrar una lista de pseudo-clases diponibles:

Indice de las pseudo-clases estándar

Y en este otro verás una lista de los pseudoelementos disponibles 😉:

Lista de pseudoelementos

Me gusta que Teff haya escuchado las criticas de que sus cursos eran solo diapositivas y cero código. Muy lindo que quiera cambiar o mejorar.

Pseudo clases

Link hace referencia a un enlace que no se ha visitado.

a:link{
    color: brown;
}

visited hace referencia a un enlace que ya ha sido visitado.

a:visited {
    color: tomato;
}

hover es una pequeña interacción que sucede cuando pasamos el cursor sobre la clase referenciada.

a:hover{
    background-color: palegoldenrod;
}

not esta omite la clase que le pasemos por parametro.

p:not(.maravillas){
    color: aquamarine;
}

nth-child esta funciona para poder referencia una clase especifica de acuerdo al numero que le pasemos como parámetro, por cierto esta es muy útil para css grid.

.container div:nth-child(1){
    color: lightblue;
}

Pseudo-elementos

after coloca después algo previamente establecido por nosotros.

div::after{
            content: ":)";
        }

before coloca antes algo previamente establecido por nosotros.

div::before{
            content: ":(";
        }

• :first-child ⇒ Toma al ultimo elemento de una serie de etiquetas iguales.
• :only-child ⇒ Toma al primer elemento de una serie de etiquetas iguales.
• :nth-child(A) ⇒ Toma al elemento según la posición en la que este. Comienza del 1 hasta n.
• :first-of-type ⇒ Toma al primer elemento de todos los que sean iguales.
• :nth-of-type(A) ⇒ Similar al :nth-child, con la inclusión de que se puede pasar a todos los elementos mediante :nth-of-type(odd)
• :nth-of-type(An+B) ⇒ Se le puede pasar la ubicación del elemento a modificar, siendo [An = cada cuantos elementos va a dar el salto] y [+b será la forma de resetear los saltos y darle un valor personalizado.]
• :only-of-type ⇒ Selecciona elementos que sean los únicos de su tipo dentro de su elemento padre.
• :last-of-type ⇒ Selecciona a los últimos elementos dentro de un grupo que sean iguales.
• :empty ⇒ Se aplica a elementos que no tenga ningún otro dentro.
• :not(X) ⇒ Selecciona todos los elementos que no coincidan con el selector de negación.
• A[attribute] , ejemplo: a[href] ⇒ Selecciona todos los elementos que tengan un atributo especifico.
• [attribute="value"], ejemplo: input[type="checkbox"] ⇒ Selecciona todos los elementos que tengan un valor de atributo especifico. También permite buscar partes de ese valor, como por ejemplo: .toy[category^=“Swim”] daría como posibles resultados category="Swimwear // category=“Swimming”.
• [attribute$="value"], ejemplo: img[src$=".jpg"] ⇒ Permite buscar una parte especifica, como por ejemplo que las imágenes terminen en .jpg o también se podría. Siempre busque las partes finales de la palabra.
• [attribute*="value"] ⇒ Similar al de arriba, solo con la diferencia que en vez de buscar al final de una palabra, este permite hacerlo dentro, pudiendo buscar partes en toda la longitud.

Comparto mis apuntes de la clase:

Al momento de usar pseudo-clases, es necesario tener en cuenta que estas llevan un order, de acuerdo a LVHA-order
.
Entonces, para que funcionen correctamente, necesitan ir en el siguiente orden (en caso de que se ocupen todas las mencionadas)

• :link
• :visited
• :hover
• :active

trigger o disparador

Un disparador o trigger es una funcionalidad que se ejecuta de forma automática cuando se realiza una accion.

Pseudo-clases en las animaciones

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

• :link
• :visited
• :hover
• :not
• :nth-child
• :focus
• :active
• :disabled

Pseudo-elementos en las animaciones

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

• ::after
• ::before

URL

• Pseudo-classes
• Pseudo-elements

Pseudo-classes

es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Sintaxis

selector : pseudoclase { propiedad: valor; }

Pseudoelementos

los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento.
siempre se escribe con dos puntos dobles
Sintaxis

selector :: pseudo-elemento { propiedad: valor; }

para los que les gusta tener el html y el css separado se los dejo aqui

Pseudo-clases
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <<link rel="stylesheet" href="./style.css">
</head>
<body>
    <a href="">Alicia</a>
    <p>en el</p>
    <p class="maravillas">país</p>
    <div class="cotainer">
        <div>>Alicia</div>
        <div>>Alicia</div>
        <div>>Alicia</div>
    </div>
</body>
</html>

CSS

a:link {
    color: hotpink;
}
a:visited {
    color: tomato;
}
a:hover {
    background-color: palegoldenrod;
}
p:not(.maravillas) {
    color:lightsalmon;
}
.container div:nth-child(1){
    color: lightblue;
}

pseudo-elementos
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
</head>
<body>
    <div>>Alicia</div>
</body>
</html>

CSS

div::before {
    content: ":)";
}
div::after {
    content: ":(";
}

¿Alguien sabe cual es el tema que utiliza en VS Code la profe? 🤔

Aplicando Pseudo clases

El orden adecuado para que los estilos de las pseudo-clases no se sobrescriban (sean anulados) es agregar los estilos en el siguiente orden:

• linked - visited - hover - active.
  *Teniendo en cuenta que todos tengan la misma especificidad.

Un concepto importante para las animaciones es el triget!
Que es un triget?
Es un accionador de las animaciones.
Una animacion se ejecuta justo despues de una accion, y las acciones pueden ser direrntes en el navegador (hover, clic, scroll, recargar la pagina y ver una animacion) y entonces tenemos las pseudo clases y pseudo elementos.

Amo más los gifs de la peli que cada video, aguante Anne H.❤️

Gracias Teff ❤️ Como siempre increíbles tus cursos!

hola,
una buen extension que puedan usar en este curso es la de live server para que ustedes les de click derecho en donde esta su codigo html y le dan en open with live server y listo ya vemos lo que estamos haciendo

Por fin tiramos código. Creo que éste curso sí pertenecía al flujo original.

Ya me estaba preocupando.

Las pseudoclases y pseudoelementos son dos conceptos distintos en CSS, que se utilizan para aplicar estilos a partes específicas de un elemento HTML.

Las pseudoclases se utilizan para seleccionar y aplicar un estilo a un elemento HTML en función de su estado o relación con otros elementos. Por ejemplo, la pseudoclase :hover se utiliza para aplicar un estilo cuando el cursor del ratón se encuentra sobre un elemento, mientras que la pseudoclase :first-child se utiliza para seleccionar el primer elemento hijo de un elemento.

Los principales usos de las pseudoclases son:

Para aplicar estilos a los enlaces en diferentes estados, como :hover, :active o :visited.
Para aplicar estilos a los elementos según su posición o relación con otros elementos, como :first-child, :last-child, :nth-child, :nth-of-type, etc.
Para aplicar estilos a los elementos según su contenido o atributos, como :empty, :checked, :disabled, :required, etc.
Por otro lado, los pseudoelementos se utilizan para seleccionar y aplicar un estilo a una parte específica de un elemento HTML, como la primera letra o la primera línea de un párrafo. Los pseudoelementos se representan con dos puntos (:😃 y se colocan después del selector de un elemento. Por ejemplo, el pseudoelemento ::before se utiliza para insertar contenido antes del contenido del elemento seleccionado.

Los principales usos de los pseudoelementos son:

Para insertar contenido antes o después del contenido del elemento seleccionado, utilizando los pseudoelementos ::before y ::after, respectivamente.
Para aplicar estilos a partes específicas de un elemento, como la primera letra o la primera línea de un párrafo, utilizando los pseudoelementos ::first-letter y ::first-line.
Para crear efectos de selección y resaltado de texto, utilizando los pseudoelementos ::selection y ::marker

Para los que no les funcione el :link con el color que sea, desde Visual Studio Code abran el archivo con clic derecho y den clic donde dice “Copiar ruta de acceso” y luego la pegan en el navegador. De esta manera SÍ se puede ver el cambio de color o la diferencia entre :link y :visited 🙂

Muy buena clase para complementar el curso de HTML y CSS. Quedo muy claro 😃

Es difícil no sentir aprecio a la forma de explicar de la profe. Gracias profe 😉

Muy buena clase, no sabia muy bien la diferencia entre pseudoclase y pseudoelemento
muchas gracias

me re gusto este curso

En la etiqueta ancla pueden usar # para eviar que se regrese al home, y se quede en la misma página.

Lastimosamente, este curso no debe ser etiquetado como Básico, ya que durante el desarrollo del código, hay muchas cosas que se dan por entendidas, dificultando el proceso de aprendizaje a los que estamos incursionando en este tema. Por favor tenerlo en cuenta, sería ideal, que se explicará cada cosa, paso a paso.

Algunas pseudo-clases:

• link → para links no visitados
• visited → para links visitados
• hover → para cuando el puntero pasa encima del elemento
• elemento:not(.clase) → pon estos atributos al elemento mientras no tenga la clase
• nth-child() → número de elemento hijo
   

Algunos pseudo-elementos::

• ::before → agrega contenido antes del texto
• ::after → agrega contenido después del texto

Pseudoclases

Se crean con : luego de la clase que queremos seleccionar

• link: Aplica los estilos a los links que no hayan sido clickeados (de la clase en específico)
• visited: Aplica los estilos a los links que hayan sido clickeados (de la clase en específico)
• hover: Aplica los estilos a los elementos de la clase a los cuales les pase el mouse por encima
• not(): Aplica los estilos a los elementos que NO pertenezcan a la clase que señalé
• nth-child(# de hijo): Aplica los estilos al hijo # marcado en la pseudoclase

Pseudoelementos

Se crean con :: luego de la clase que queremos seleccionar

• before: Con before y content agregamos información antes de la clase seleccionada
• after: Con after y content agregamos información después de la clase seleccionada

Las pseudo-clases y pseudo-elementos en CSS son utilizados para seleccionar elementos basados en su estado o posición en el documento HTML. En las animaciones, estas características se pueden utilizar para crear efectos específicos y mejorar la experiencia de usuario.

Las pseudo-clases incluyen:

:hover: se aplica cuando un usuario coloca el cursor sobre un elemento.

:active: se aplica cuando un usuario hace clic en un elemento.

:focus: se aplica cuando un elemento tiene el foco, como cuando un usuario hace clic en un enlace o en un campo de texto.

Los pseudo-elementos incluyen:

::before: permite insertar contenido antes de un elemento.

::after: permite insertar contenido después de un elemento.

Que interesante esta pseudo-clase ✨

p:not(.maravillas){
      color: lightsalmon;
}

<a href="./">Alicia</a>
<p>en el</p>
<p class="maravillas">país</p>

Muy buen repaso de pseudo-clases y pseudo-elementos!

Mi codigo de esta clase

• Pseudo Clases

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a:link {
        color: hotpink;
      }
      a:visited {
        color: tomato;
      }
      a:hover {
        background-color: aquamarine;
      }
      p:not(.Maravillas) {
        color: blueviolet;
      }
      .container div:nth-child(1) {
        color: lightblue;
      }
    </style>
  </head>
  <body>
    <a href="/">Alicia</a>
    <p>En el</p>
    <p class="Maravillas">Pais</p>
    <div class="container">
      <div>Hola</div>
      <div>Como</div>
      <div>Estas</div>
    </div>
  </body>
</html>

• Pseudo Elementos

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div::before {
        content: ":D ";
      }
      div::after {
        content: " :)";
      }
    </style>
  </head>
  <body>
    <div>Alicia</div>
  </body>
</html>

Yo intenté usar :link pero no me funcionó, la solución que le di fue asignarle un color por defecto y luego con :visited se lo cambié.
Por si alguien tiene el mismo problema, tal vez esta pueda ser la solución.

a{
    color: #008b45;
}

a:visited{

    color: violet;
}

👠 Pseudo-clases y pseudo-elementos en las animaciones

Ideas/conceptos claves

Trigger es un accionador de las animaciones

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial, sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

Recursos

Pseudo-classes - CSS | MDN

Pseudoelementos - CSS | MDN

Apuntes

• Un concepto importante en las animaciones es un trigger
  • Una animación se ejecuta después de una acción
  • Una acción pueden ser: pasar por el elemento, dar click, hacer scroll, etc.
  • Para ello podemos usar pseudo-clases y pseudo-elementos

Pseudo Clases

/* Nos sirve para seleccionar enlaces que no fueron abiertos aun */
a:link {
  color: hotpink;
}

/* Nos sirve para seleccionar enlaces que fueron abiertos */
a:visited {
  color: tomato;
}

/* Nos sirve para aplicar estilos cuando el cursor esta encima */
a:hover {
  background-color: palegoldenrod;
}

/* Nos sirve para decir que no aplique los estilos a ciertos elementos */
p:not(.maravillas) {
  color: lightsalmon;
}

/* Nos ayuda a seleccionar elementos hijos */
.container div:nth-child(1) {
  color: lightseagreen;
}

Pseudo Elementos

/* Nos permite realizar cambios antes de un elemento */
div::before {
  content: ":)";
}

/* Nos permite realizar cambios después de un elemento */
div::after {
  content: ":(";
}

<aside>
📌 RESUMEN: Una animación se ejecuta después de una acción (Trigger), Para aplicarlos podemos usar pseudo-elementos y pseudo-clases.

</aside>

:focus

Representa un elemento que ha recibido el foco. Como cuando el usuario hace clic sobre el elemento.

:active

Representa un elemento que el usuario esta activando. Generalmente la “activación” comienza cuando el usuario presiona el botón primario del mouse y termina cuando lo suaelta.

:disabled

Representa cualquier elemento deshabilitado. Un elemento se encutra deshabilitado cuando no puede ser activado ni recibir el foco.

Sou de los que la unica animacion que le ponia a mis sitios ere el efecto Hover No entendia el resto o simplemente los desconocia Genial.

** Primer curso con Estefany (Que es una gran profesora) donde vemos codigo directamente. Genial

pseudo clases = :
pseudo elementos = ::

No se porque pero de todos tus cursos…en este no me aburro. tal vez sea por el formato. De todas formas son buenos cursos

Pseudo-clases y pseudo-elementos en las animaciones

Una animación ocupa un accionador para que sucedan, en CSS usamos las pseudo-clases y pseudo-elementos.

    /* Link No visitado */
        a:link {
            color: hotpink;
        }
        /* Link Visitado */
        a:visited {
            color: tomato;
        }
        /* Pasar el cursos */
        a:hover {
            background-color: palegoldenrod;
        }
        /* Seleccionar que no tendrá estilos */
        p:not(.maravillas) {
            color: lightsalmon;
        }
        /* Definir estilos en los hijos de un contenedor padre */
        .container div:nth-child(1) {
            color: lightseagreen;
        }
        /* Colocar estilos antes del elemento HTML */
        div::before {
            content: ":)";
        }
        /* Colocar estilos después del elemento HTML */
        div::after {
            content: ":(";
        }

Les recomiendo CodePen es un editor de texto online gratis y de facil uso, nos viene bien para estos cursos que necesitamos probar codigo y ademas los cambios se reflejan automaticamete, ademas podemos tener registro de cada archivo, creandonos una cuenta.
Se que en VsCode esta LiveServer, pero esta herramienta ayuda tambien.

Pseudo-clases

Es un estado que podemos manipular, el estado de hover, el de active, etc. Su sintaxis es:

selector:pseudoclase { propiedad: valor; }

Ejemplos

• :link : Representa un elemento que todavía no se ha visitado, se le aplica a elementos que contengan el atributo href="". Los estilos serán anulado por cualquier pseudo-clase :active, :hover y :visited.

  a:link {
  	color: hotpink;
  }
  

• :visited : Representa enlaces que el usuario ya ha visitado, pocos elementos pueden usarla.

  a:visited {
  	background-color: salmon;
  }
  

• :hover : Se activa cuando el usuario esta sobre un elemento. Llega a ser problemática en pantallas táctiles.

  a:hover {
  	border-bottom: 1px solid white;
  }
  

El orden en que se ponen es; LVHA: :link — :visited — :hover — :active.

• :not() : Selecciona a que elementos específicos no se les aplicara un estilo. Selecciona los elementos que no coinciden con una lista de selectores.

/*Todos los elementos p excepto los que tengan la clase maravillas*/
p:not(.maravillas) {
	color: red;
}

• :nth-child : Nos permite seleccionar varios elementos hijos de la clase indicando su posición.

  /*Indicamos que primer div de .container le aplicaremos un fondo amarillo*/
  .container div:nth-child(1) {
  	background-color: yellow;
  }
  

• :active : Representa un elemento que el usuario está activando. Con un mouse, la “activación” es cuando el usuario presiona el botón del mouse y termina cuando lo suelta. Se usa en elementos <a> y <button>

  button:active {
  	border: 2px solid green;
  }
  

Pseudo-elementos

Permiten añadir estilos a una parte del documento, un elemento que no esta creado con HTML pero lo podemos crear con CSS.

• ::before : Añade un contenido antes del texto.

  p::before {
  	content: ";)"
  }
  

• ::after : Agregar contenido al final de lado derecho.

  p::after {
  	content : ":o"
  }
  

:hover DEBE ir después de :link y :visited (si están presentes) en la definición de CSS, para que sea efectivo.

:active DEBE ir después de :hover (si está presente) en la definición de CSS para que sea efectivo.

🍿Pseudo-clases y pseudo-elementos en las animaciones

❤Pseudo-clases

es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Sintaxis

selector : pseudoclase { propiedad: valor; }

• Ejercicios Pseudo-classes

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          a:link {
              color: hotpink;
          }
          a:visited {
              color: tomato;
          }
          a:hover {
              background-color: palegoldenrod;
          }
          p:not(.maravillas){
              color: lightsalmon;
          }
          .container div:nth-child(1) {
              color:lightseagreen;
          }
      </style>
  </head>
  <body>
      <a href="/www.google.com">Alicia</a>
      <p>en el</p>
      <p class="maravillas">pais</p>
      <div class="container">
          <div>Alicia</div>
          <div>Alicia</div>
          <div>Alicia</div>
      </div>
  </body>
  </html>l
  

🧡Pseudo-Elementos

los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Siempre se escribe con dos puntos dobles

Sintaxis

selector :: pseudo-elemento { propiedad: valor; }

• Ejercicios Pseudo-Elementos

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          div::before {
              content: ":]";
          }
          div::after {
              content: "[:";
          }
      </style>
  </head>
  <body>
      <div>Alicia</div>
  </body>
  </html>
  

💛Lecturas Recomendadas

:disabled

:active

:focus

:hover

htmlcolorcodes

Pseudo-classes

Pseudo-elementos

Muy buena explicación Miss!!! Voy a practicar muy bien todo para tener más claro todo, gracias 😎💓

Notas de la clase

Pseudo-clases

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Pseudo-clases</title>
        <link rel="stylesheet" href="">
        <style>
            /* El color de un link sin visitar */
            a:link {
                color: hotpink;
            }
            /* El color de un link ya visitado */
            a:visited {
                color: tomato;
            }
            /* Al pasar el poiter sobre ese elemento */
            a:hover {
                background-color: crimson;
            }
            /* Todos los elementos "p" excepto el de la clase "maravilla" */
            p:not(.maravilla) {
                color: coral;
            }
            /* Solamente aplica la propiedad al primer hijo "div" de esa clase "container" */
            .container div:nth-child(1) {
                color: chartreuse;
            }
        </style>
    </head>
    <body>
        <a href="#">Alicia</a>
        <p class="maravilla">primer párrafo</p>
        <p>segundo párrafo</p>
        <div class="container">
            <div>uno</div>
            <div>dos</div>
            <div>tres</div>
            <div>cuatro</div>
        </div>
    </body>
</html>

.
Pseudo-elementos

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Pseudo-elementos</title>
        <link rel="stylesheet" href="">
        <style>
            /* Agregar una propiedad antes del contenido del selector "div" */
            div::before {
                content: ":) ";
            }
            /* Agregar una propiedad después del contenido del selector "div" */
            div::after {
                content: " --->";
            }
        </style>
    </head>
    <body>
        <div>
            Soy un contenedor
        </div>
    </body>
</html>

Muy bien, mucho más clara la diferencia de Pseudo-clases y Pseudo-elementos.

Un trigger o disparador

Un disparador o trigger es una funcionalidad que se ejecuta de forma automática cuando se realiza una accion.