html - style - CSS: ¿Línea a través con un color diferente del color del texto?

html title attribute

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS tachado a través de diferentes colores del texto? 11 respuestas

Me gustaría tener texto gris con un tachado rojo, pero este estilo no funciona:

color: #a0a0a0;
text-decoration: line-through 3px red; 

¿Qué estoy haciendo mal?

Answer 1

Hay otra forma de ver el significado de la especificación CSS2; y esa es la decoración de texto exterior que establecerá el color del "paso de línea" y el texto, pero se puede usar una declaración de color interior (en una etiqueta ''span'') para restablecer el color del texto.

<p style="text-decoration:line-through;color:red">
<span style="color:#000">
The "line-through" and "color" are declared in ''p'', and the inner ''span'' 
declares the correct color for the text.
</span>
</p>

Answer 2

Las especificaciones de CSS2 dicen

El color (es) requerido para la decoración del texto debe derivarse del valor de la propiedad ''color'' del elemento en el que se establece la ''decoración-texto''. El color de las decoraciones debe permanecer igual incluso si los elementos descendientes tienen diferentes valores de "color"

Supongo que eso significa que no puedes hacerlo de esa manera.

¿Una solución podría ser usar algún tipo de borde y levantarlo?

Answer 3

No es posible hacer una línea con un color diferente. Estará en el color que usted defina con el color propiedad.

vea http://www.w3.org/TR/CSS2/text.html#lining-striking-props

EDITAR :

Lo que me vino a la mente es usar una imagen de fondo con un punto de color de 1px * 1px en el color que te gusta.

CSS:

.fakeLineThrough {
  background-image: url(lineThroughDot.gif);
  background-repeat: repeat-x;
  background-position: center left;
}

HTML:

<span class="fakeLineThrough">the text</span>

Answer 4

Puede simular el efecto deseado con dos elementos anidados, por ejemplo:

<style type="text/css">
    span.inner {
        color: green;
    }
    span.outer {
        color: red;
        text-decoration: line-through;
    }
</style>

<span class="outer">
    <span class="inner">foo bar</span>
</span>

jsfiddle

Answer 5

Sin DOM adicional (pero puede que no funcione para algunos diseños por razones obvias):

<style type="text/css">
    .strikethrough {
        position: relative;
    }

    .strikethrough:before {
        border-bottom: 1px solid red;
        position: absolute;
        content: "";
        width: 100%;
        height: 50%;
    }
</style>

<span class="strikethrough">Foo Bar</span>

Un ejemplo de jsfiddle aquí.