Subrayado de puntos CSS. ¿Cómo agregar subrayados punteados a los enlaces? text-underline-position - Posicionamiento de subrayado CSS

Subrayado para elementos de bloque como una etiqueta

se puede hacer de dos maneras. Por ejemplo, establezca la línea debajo del texto en todo el ancho del bloque, independientemente del volumen del texto. Y también subrayar solo el texto. A continuación consideraremos ambas opciones.

Línea debajo del texto en todo el ancho del bloque.

Para crear una línea debajo del texto, agregue al elemento propiedad de estilo border-bottom , su valor es tanto el grosor de la línea como su estilo y color (ejemplo 1).

Ejemplo 1. Línea de ancho completo

HTML5 CSS 2.1 IE Cr Op Sa Fx

Texto de ejemplo

La distancia desde la línea al texto se puede ajustar agregando la propiedad padding-bottom al selector H1. Resultado este ejemplo mostrado en la Fig. 1.

Texto subrayado

Para subrayar solo el texto, debe usar la propiedad text-decoration con el valor underline y agregarlo nuevamente al selector H1 (ejemplo 2).

Ejemplo 2. Ancho de línea a texto

HTML5 CSS 2.1 IE Cr Op Sa Fx

Texto de ejemplo

El titular negro llama la atención aunque sea negro y no blanco.

El resultado de este ejemplo se muestra en la Fig. 2.

En caso de uso propiedades de decoración de texto la línea está rígidamente unida al texto, por lo que no se puede determinar su posición y estilo.

hay un montón diferentes caminos subrayando el diseño. Quizás recuerdes el artículo de Marcin Vichari "Elaboración de subrayados de enlaces" en Medium. Los desarrolladores de Medium no están intentando hacer ninguna locura, solo quieren crear una bonita línea debajo del texto.

Este es el guión bajo más simple, pero tiene Talla correcta y no se superpone a las extensiones de letras. Y definitivamente es mejor que el guión bajo predeterminado en la mayoría de los navegadores. Medium tuvo que enfrentar desafíos para lograr su estilo en la web. Dos años después, todavía nos resulta difícil crear subrayados bonitos.

Objetivos

¿Qué hay de malo con la decoración de texto habitual: subrayado? Si estamos hablando acerca de En cuanto al escenario ideal, el guión bajo debería hacer lo siguiente:

• posición debajo de la línea de base;
• omitir llamadas;
• cambiar el color, grosor y estilo de la línea;
• trabajar con texto multilínea;
• trabajar en cualquier fondo.

Creo que todos estos son requisitos razonables, pero hasta donde yo sé, no existe una forma intuitiva de lograrlo con usando CSS.

Enfoques

Entonces qué es esto varias maneras, que podemos utilizar para implementar el subrayado en la web?

Estos son los que estoy considerando:

• decoración de texto;
• borde inferior;
• sombra de la caja ;
• imagen de fondo ;
• filtros SVG;
• Subrayado.js(lienzo);
• decoración-texto-* .

Veamos estos métodos uno por uno y hablemos de los pros y los contras de cada uno de ellos.

decoracion-de-texto

La decoración de texto es la forma más obvia de subrayar texto. Aplicas una propiedad y es suficiente. En tallas pequeñas Esto puede verse bien en una fuente, pero si aumenta el tamaño de la fuente, el subrayado comenzará a verse incómodo.

lo mas Un gran problema con la decoración de texto es una falta de configuración. Está limitado al color y al tamaño de fuente del texto y no existe una forma en todos los navegadores de cambiar esto. Hablaremos de esto con más detalle más adelante.

• fácil de usar;
• colocado debajo de la línea de base;
• omite las llamadas de forma predeterminada en Safari e iOS;
• enfatiza el texto de varias líneas;
• Funciona en cualquier fondo.

• no omite pies de página en todos los demás navegadores;
• no permite cambiar el color, grosor o estilo de la línea.

borde inferior

border-bottom logra un buen equilibrio entre simplicidad y personalización. Este enfoque utiliza la antigua propiedad de borde CSS, lo que significa que puede cambiar fácilmente el color, el grosor y el estilo.

Así es como se ve el borde inferior elementos en línea.

Principal desventaja- esta es la distancia del subrayado al texto, está completamente debajo de los elementos de llamada. Puedes solucionar este problema configurando los elementos en inline-block y disminuyendo line-height , pero luego perderás la capacidad de ajustar el texto. Bueno para líneas individuales, pero no apto para ningún otro lugar.

Además, podemos usar text-shadow para oscurecer la parte de la línea al lado de los elementos en línea, simulando esto usando el mismo color que el fondo. Es decir, esta técnica sólo funciona sobre un fondo simple de un solo color, sin degradados, patrones ni imágenes.

En este momento Ya utilizamos hasta cuatro propiedades para diseñar una línea. Es mucho más trabajo que simplemente agregar decoración de texto.

• puede omitir llamadas usando text-shadow;
• puede cambiar el color, el grosor y el estilo de línea;
• te permite utilizar transiciones y animaciones de color y audacia;
• funciona con texto de varias líneas a menos que se aplique un bloque en línea;
• Funciona en cualquier fondo siempre que no uses text-shadow.

• está demasiado bajo y se mueve de una manera complicada;
• muchas propiedades adicionales se utilizan para Operación adecuada;
• cuando se usa text-shadow, resaltar el texto se ve feo.

sombra de la caja

box-shadow dibuja un subíndice usando dos sombras interiores: uno crea un rectángulo y el segundo oculta parte del mismo. Esto significa que necesitas fondo liso para que esto funcione.

Puedes usar el mismo truco con text-shadow para rellenar los espacios entre subrayados y llamadas. Pero si el color del subrayado es diferente del color del texto (o es lo suficientemente delgado), la línea no chocará con las leyendas tanto como lo haría con la decoración del texto.

• le permite cambiar el color y el grosor de la línea;
• Funciona con texto multilínea.

• no le permite cambiar el estilo de subrayado;
• No funciona en ningún fondo.

imagen de fondo

El método de la imagen de fondo es el más cercano a lo que queremos y tiene la menor cantidad de inconvenientes. La idea es utilizar gradiente lineal y posición de fondo para crear una imagen que se repita debajo de las líneas de texto.

Para que este enfoque funcione, el texto debe estar en modo estandar pantalla: en línea; .

La siguiente opción prescinde del gradiente lineal; para los efectos, puede agregar su propia imagen de fondo.

• se puede colocar debajo de la línea de base;
• puede omitir elementos de llamada usando text-shadow;
• trabaja con imágenes personalizadas;
• envuelve varias líneas de texto;
• Funciona en cualquier fondo siempre que no uses text-shadow.

• El tamaño de la imagen puede variar según la resolución de la pantalla, el navegador y la ampliación.

filtros SVG

He jugado bastante con este método. Puede crear un filtro de línea SVG que dibuje una línea y luego expanda el texto para enmascarar la parte de la línea que queremos que sea transparente. Luego puede darle al filtro una identificación y hacer referencia a él en CSS, algo así como filter: url('#svg-underline') .

La ventaja de este enfoque es que la transparencia se logra sin usar text-shadow, lo que significa que permitimos que las llamadas aparezcan en cualquier fondo, incluidos degradados y imágenes de fondo! Esto sólo funciona en una sola línea de texto, así que tenlo en cuenta.

Así es como se ve en Chrome y Firefox:

La compatibilidad con IE, Edge y Safari es problemática. Es difícil probar la compatibilidad con filtros SVG en CSS. Puede usar la directiva @supports con filter, pero esto solo verificará la funcionalidad del enlace del filtro, no la funcionalidad del filtro en sí. Mis intentos terminaron en una tediosa determinación de las capacidades del navegador; este es un inconveniente notable del método.

• se puede colocar debajo de la línea de base;
• puede omitir elementos de extensión;
• permite cambios en el color, grosor y estilo de la línea;
• Funciona en cualquier fondo.

• no funciona con texto de varias líneas;
• no funciona en IE, Edge y Safari, pero puedes usar decoración de texto como alternativa, se ve decente en Safari.

Subrayado.js (lienzo)

Underline.js es fascinante. Me parece impresionante lo que Wenting Zhang ha logrado con su dominio de JavaScript y su atención al detalle. Si no has visto la demostración técnica de Underline.js, deja de leer y dale un minuto. También hay una charla de nueve minutos de ella sobre cómo funciona, pero seré breve: el subrayado se dibuja usando elementos. . Este nuevo enfoque, que funciona sorprendentemente bien.

A pesar del nombre pegadizo, Underline.js es sólo una demostración técnica. Esto significa que no puedes simplemente conectarlo a tu proyecto sin cambiar el código.

Pensé en mencionar esto como una prueba de concepto que tiene el potencial de crear excelentes subrayados interactivos, pero necesitas escribir tu propio JavaScript para que funcione.

Nuevas propiedades de decoración de texto

Recuerdas que prometí hablar más sobre decoración de texto. El tiempo ha llegado.

Esta propiedad funciona muy bien por sí sola, pero puedes agregar algunas propiedades experimentales para modificarla. apariencia subrayado.

• texto-decoración-color
• decoración-de-texto-saltar
• estilo-de-decoración-de-texto

Pero no te emociones demasiado... La compatibilidad con el navegador es la de siempre. Así que va.

texto-decoración-color

La propiedad text-decoration-color le permite cambiar el color del subrayado por separado del color del texto. La compatibilidad con esta propiedad es mejor de lo que cabría esperar: funciona en Firefox y con el prefijo en Safari. Aquí está el truco: si tienes leyendas, Safari colocará un subrayado encima del texto.

decoración-de-texto-saltar

La propiedad text-decoration-skip permite omitir llamadas en texto subrayado.

Esta propiedad no es estándar y actualmente solo funciona en Safari, con el prefijo -webkit-. Safari habilita esta propiedad de forma predeterminada, por lo que las leyendas no siempre aparecen tachadas.

Si está utilizando Normalizar, tenga en cuenta que Últimas Versiones deshabilite esta propiedad en aras de un comportamiento coherente del navegador. Y si desea que el subrayado no afecte las leyendas, debe activarlo manualmente.

estilo-de-decoración-de-texto

La propiedad text-decoration-style ofrece las mismas opciones de estilo que propiedades de estilo de borde, añadiendo además el estilo ondulado.

Aquí hay una lista de valores disponibles:

• discontinuo
• punteado
• doble
• sólido

Actualmente, la propiedad text-decoration-style solo funciona en Firefox, aquí hay una captura de pantalla:

Qué está faltando

La serie de propiedades text-decoration-* es mucho más intuitiva de usar que las demás. Propiedades CSS para subrayar. Pero si miramos más de cerca, no hay suficientes formas de establecer el grosor o la posición de la línea para satisfacer nuestras necesidades.

Después de investigar un poco, encontré un par de propiedades más:

• ancho de subrayado de texto
• posición-subrayado-texto

Estos parecen ser los primeros borradores de CSS, pero nunca se implementaron en los navegadores debido a la falta de interés.

conclusiones

Entonces, ¿cuál es la mejor manera de subrayar?

Para texto pequeño, recomiendo usar text-decoration y agregar de manera optimista text-decoration-skip. Parece un poco vulgar en la mayoría de los navegadores, pero el subrayado siempre ha sido así en los navegadores y la gente simplemente no lo notará. Además, siempre existe la posibilidad de que, si tienes paciencia, ese subrayado se vea bien algún día sin que tengas que cambiar nada como lo hacen los navegadores.

Para el cuerpo del texto, tiene sentido utilizar imagen de fondo. Este enfoque funciona, se ve genial y existen mixins de Sass para ello. En principio, puede omitir la sombra del texto si el subrayado es fino o tiene un color diferente al del texto.

Para lineas separadas el texto usa el borde inferior junto con cualquier propiedades adicionales.

Y si necesita que las leyendas aparezcan sobre un fondo degradado o de imagen, intente usar filtros SVG. O simplemente evite el uso de guiones bajos.

En el futuro, cuando la compatibilidad con el navegador mejore, la única respuesta será el conjunto de propiedades text-decoration-*.

También recomiendo echar un vistazo al artículo CSS Underlines Suck de Benjamin Woodroffe, que aborda los mismos problemas.

Nos gustaría señalar que esto no es significado de la frontera en CSS, pero un valor ligeramente diferente, cuyo uso no requiere el uso de scripts o flash. Entonces empecemos.

Opciones de subrayado

De hecho, puede haber muchas opciones, todo depende de tu imaginación. Te mostraremos tres diferentes opciones: Aparece una franja a la izquierda, al centro y a la derecha.

Ejemplo 1: guión bajo izquierdo

HTML

Primero, creemos un elemento. Por ejemplo, la etiqueta a, que es un enlace.

CSS

Normalmente el subrayado está definido por el valor de decoración del texto, pero la animación no funcionará en este caso. EN en este caso Lo omitiremos y asignaremos un pseudoelemento :before , con el que haremos que el subrayado aparezca animado.

A (pantalla: bloque en línea; posición: relativa; decoración de texto: ninguna;)

Le hemos dado a este elemento un ajuste de bloque, que no permitirá que el subrayado vaya más allá de los bordes del elemento y permitirá que la etiqueta se coloque en cualquier lugar dentro de un bloque. A continuación, pasemos al pseudoelemento :before.

A:antes (pantalla: bloque; posición: absoluta; contenido: ""; altura: 2px; ancho: 0; fondo: #ec4444; transición: ancho 0.3s entrada y salida fácil; izquierda: 0; abajo: 0;)

Preguntamos posicionamiento absoluto pseudoelemento para que el subrayado quede dentro de la etiqueta y no se extienda más allá de ella. La altura de la barra será de 2 píxeles, la longitud será 0, el color será rojo y el valor de transición será responsable de la animación. Ahora solo queda agregar el efecto de desplazamiento.

A: flotar: antes (ancho: 40%;)

Por lo tanto, establecemos el valor de longitud en el 40% de la longitud total del elemento. Por analogía, te contaré otros ejemplos en los que usaremos otro pseudoelemento.

Ejemplo 2: subrayado centrado

HTML

Dejemos la misma etiqueta.

CSS

a (pantalla: bloque en línea; posición: relativa; decoración de texto: ninguna;) a:antes (pantalla: bloque; posición: absoluta; contenido: ""; alto: 2px; ancho: 0; fondo: #ec4444; transición : ancho 0,3 s de entrada y salida, izquierda 0,3 s de entrada y salida; izquierda: 50%; abajo: 0; a:después (pantalla: bloque; posición: absoluta; contenido: ""; altura: 2px; ancho : 0; color de fondo: #ec4444; ancho 0,3 s fácil de entrar y salir: 0)

A:hover:antes (ancho: 50%; izquierda: 0; ) a:hover:después (ancho: 50%; )

Al pasar el cursor, queremos que el subrayado vaya desde el centro hasta los bordes del elemento. Entonces, para el pseudoelemento :before establecemos la posición izquierda en 0, lo que hará que el subrayado aparezca hacia el borde izquierdo.

Ejemplo 3: subrayado derecho

HTML

Texto del enlace

CSS

a (pantalla: bloque en línea; posición: relativa; decoración de texto: ninguna;) a:después (pantalla: bloque; posición: absoluta; contenido: ""; alto: 2px; ancho: 0; fondo: #ec4444; transición : ancho 0,3 s fácil entrada y salida; derecha: 0; abajo: 0;) a:hover:después (ancho: 40%;)

Por lo tanto, obtuvimos la apariencia de un subrayado a la derecha.