Decoracion de habitaciones para niños

Estilo de decoración de texto

Puedes aplicar la decoración de texto a tu span, pero aparecerá justo debajo del texto del span y no en línea con el texto anterior. Para que aparezca en línea tendrá que hacer que su span tenga la misma altura que su contenedor padre. También puede utilizar un pseudoelemento («before» o «after») para colocar la línea donde desee.
Esto sucede debido a la especificación CSS que básicamente dice que no se puede tener decoración de texto en elementos de bloque en línea. Si quieres que tu span también se vea afectado por la decoración de texto, debes cambiar el display:inline-block. Puede encontrar más información en esta pregunta .
El tamaño de la fuente del contenido en la insignia es diferente del otro texto del enlace y también tiene una alineación de top:-5px. Estos dos rompen la línea e incluso sin usar la insignia de bootstrap tendrías el texto-decoración roto. Sí se extendería al texto del span pero estaría roto y no sería lo que quieres. Y bootstrap badge también tiene el estilo de text-decoration: none…

Omisión de la decoración del texto

Además, parece imposible influir en la posición de la decoración de texto. También he intentado una solución con border y :after, pero esto no funciona con más de una línea. Agradezco cualquier ayuda.
Desgraciadamente, no es posible evitar que las decoraciones se dibujen sobre cajas en línea descendientes (véase CSS2.2 y css-text-decor-3). Tu único recurso, si no quieres (o no puedes) hacer trampas dibujando decoraciones falsas tú mismo, es dividir tu elemento .strike exterior en los límites del elemento .strike interior de forma que se produzca una estructura similar a la de tu ejemplo de referencia.
He encontrado otra solución que funciona bien en mi caso. La publico aquí ya que puede ser de interés para otros. Mientras que la solución del gradiente de fondo se mostraba excelentemente en los navegadores, no funcionaba bien al imprimir el documento. Esta solución separa la segunda línea tachada de su texto rodeándola con otro elemento <span>, que se desplaza un poco hacia arriba escalando el tamaño de la fuente. El tamaño de la fuente se restablece entonces en el elemento span anidado para mostrar el texto correctamente.

Subrayado de ancho css

Puede aplicar la decoración de texto a su span, pero aparecerá justo debajo del texto del span y no en línea con el texto anterior. Para que aparezca en línea tendrá que hacer que su span tenga la misma altura que su contenedor padre. También puede utilizar un pseudoelemento («before» o «after») para colocar la línea donde desee.
Esto sucede debido a la especificación CSS que básicamente dice que no se puede tener decoración de texto en elementos de bloque en línea. Si quieres que tu span también se vea afectado por la decoración de texto, debes cambiar el display:inline-block. Puede encontrar más información en esta pregunta .
El tamaño de la fuente del contenido en la insignia es diferente del otro texto del enlace y también tiene una alineación de top:-5px. Estos dos rompen la línea e incluso sin usar la insignia de bootstrap tendrías el texto-decoración roto. Sí se extendería al texto del span pero estaría roto y no sería lo que quieres. Y bootstrap badge también tiene el estilo de text-decoration: none…

Ancho de la decoración del texto

CSS no proporciona un mecanismo directo para especificar un color único para cada tipo de línea. No obstante, este efecto puede conseguirse anidando elementos, aplicando un tipo de línea diferente a cada elemento (con la propiedad text-decoration-line) y especificando el color de la línea (con text-decoration-color) en cada elemento.Sintaxis/* Valores de <color> */
Aspectos relacionados con la accesibilidadEs importante garantizar que la relación de contraste entre el color del texto, el fondo sobre el que se coloca el texto y la línea de decoración del texto sea lo suficientemente alta como para que las personas con problemas de visión puedan leer el contenido de la página. La relación de contraste del color se determina comparando la luminosidad de los valores del color del texto y del fondo.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad