Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Pseudo-Elements en CSS

En este tutorial hablo de pseudo elementos. Hay muchos casos de uso para estos elementos y en este tutorial demuestro un uso que consiste en agregar un carácter especial a los elementos del menú que tienen submenús ocultos debajo de ellos.

Método de aprendizaje preferido?

Fragmentos de código
Si solo desea el código y no necesita una descripción.
Mirar un video
Si te gusta que te muestren cómo funciona algo con alguna explicación, mira el video.
Lectura de una descripción
Si aprende mejor leyendo, incluyo la transcripción del video con los fragmentos de código correspondientes incrustados.

Solo código

Transcripción

Los pseudo-elementos son una forma de agregar contenido real a su página usando solo CSS. Por supuesto, en circunstancias normales, desea que su contenido se encuentre en el HTML. Pero hay muchos casos de uso para elementos psuedo en los que es posible que desee agregar algo a la página por motivos de presentación.
Un ejemplo está en la navegación desplegable que creé en mi último tutorial. Si miramos el menú, hay dos menús con submenús desplegables que solo se muestran al pasar el mouse sobre el menú. No hay nada que indique al usuario que hay más opciones debajo.
Estoy comenzando con el código de mi ejemplo de navegación desplegable. Voy a agregar un nombre de clase a cualquier elemento del menú con un submenú. Solo lo llamaré sub.
Ahora puedo apuntar esos elementos con .sub.
Si agrego el ::afteral selector secundario, podré agregar algún contenido "después" del selector.
Lo hago especificando contentcomo la propiedad, y luego lo que quiera agregar como valor, entre comillas. Lo que escriba, se agregará después del selector al que me dirijo.
Esto no es realmente lo que quiero. Si abro las Herramientas para desarrolladores e inspecciono el elemento ... Necesito actualizar la página para poder ver sin los ganchos de Vista previa en vivo aquí. Ahora podemos ver este elemento ::afteral final de las lietiquetas con una clase de subViene después del submenú, por lo que lo vemos en una nueva línea. En realidad no vemos el> que agregué, vemos el elemento ":: después". El> proviene del CSS que puedes ver cuando miras los estilos del elemento.
Realmente quiero que esto se agregue al final de la etiqueta de anclaje, así.
Quizás se pregunte por qué no solo agregarlo directamente al HTML. Bueno, por supuesto que puede hacerlo, pero si tiene una navegación realmente compleja que cambia, es más fácil apuntar a todos los menús que necesitan el carácter con un nombre de clase, como 'sub' en lugar de tener que actualizar el HTML cada vez su estructura de menú cambia.
Este contenido podría ser cualquier cosa. Pueden ser muchos caracteres o una imagen que especifique con una url.
Me gustaría que sea un triángulo en lugar de un símbolo>. Podemos usar un personaje para eso en lugar de una imagen.
Hay un buen sitio web que muestra símbolos que están disponibles para usar con códigos de caracteres.
www.graphemica.com
Si busco un triángulo rectángulo, tengo muchas opciones. Quiero usar este pequeño triángulo que apunta a la derecha.
Me dice el carácter Unicode, pero si pongo eso en el contenido, no funcionará. Solo mostrará esos caracteres.
Podemos ver la entidad HTML, pero eso tampoco funciona aquí. Podríamos usar eso si estuviéramos agregando el contenido directamente al HTML, pero si lo usáramos aquí solo mostraría los caracteres.
En cambio, si me desplazo hacia abajo y encuentro la sección de Código fuente, me indica la forma de representar este personaje en CSS. Básicamente es el mismo número de arriba "25B8" con un \ 0 delante de él en lugar del U +.
Entonces, si hago que el contenido funcione, funciona. Vemos un bonito triángulo rectángulo justo allí.
Una de las cosas buenas de los elementos psuedo es que se pueden diseñar. Me gustaría mover el triángulo sobre un poco, por lo que puede añadir un margin-leftde 3pxy el carácter a tener un poco de espacio para respirar.
  .sub a::after {
    content: "025B8";
    margin-left: 3px;
  }
También podría cambiar el color si quisiera.
color: hotpink;
Me gustaría cambiar el personaje para que apunte hacia abajo al pasar el mouse. Podríamos manejar eso transformando el personaje con una rotación, o simplemente podríamos encontrar un triángulo orientado hacia abajo para establecerlo como contenido.
Buscaré "triángulo descendente" y puedo usar este personaje.
Quiero apuntar .sub:hover a::aftery puedo asumir que la versión CSS de este personaje es \ 0 más los caracteres que copié.
  .sub:hover > a::after {
    content: "25BE";
  }
Ahora, cuando nos desplazamos, podemos ver el cambio de personaje.
Necesito arreglar mis selectores para que el triángulo solo se agregue a las etiquetas de anclaje superiores. Puedo hacer eso agregando el >a mi selector para que solo las etiquetas de anclaje que sean descendientes directos .subsean dirigidas.
  .sub > a::after {
    content: "025B8";
    margin-left: 3px;
  }

  .sub:hover > a::after {
    content: "25BE";
  }
Ahora he estado hablando ::after, pero también hay un ::beforepseudo-elemento, que como puede suponer agregará algo de contenido justo antes de su elemento. Funciona exactamente igual.
Ya mencioné que puede usar una imagen para insertar el contenido.
Podría agregar una imagen antes de mis elementos de navegación especificando una URL para el contenido. Estoy usando el selector descendiente directo nuevamente para no obtener los elementos del submenú.
  .nav > ul > li > a::before {
    content: url(http://css-snippets.com/favicon.ico);
    margin-right: 3px; 
  }
Realmente no quiero esta imagen, pero solo quería demostrar cómo funciona. Esta técnica podría usarse para iconos de navegación.
Así que eso es un vistazo rápido a los pseudo-elementos. Probablemente no desee usarlos para insertar contenido real en sus sitios web, pero para agregar algunos elementos de presentación o decoración, pueden ser muy útiles. Se han hecho muchas cosas interesantes usando estos elementos y puede encontrar muchos ejemplos en toda la web.
Uno de los usos más comunes es usar un ::afterelemento como una solución clearfix cuando está usando flotadores. He hablado sobre esa solución en un tutorial anterior, llamado Solución Clearfix.
Si tiene alguna pregunta, por favor hágamelo saber.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas