¿Es posible especificar el grosor de línea para "text-decoration: line-through"? en CSS?

Question

El peso predeterminado de 1px para propiedad de paso de línea en CSS es excelente para la copia de cuerpo en 1em.

Desafortunadamente para artículos más grandes como un precio establecido en 3em en un sitio de oferta, 1px es realmente demasiado liviano. ¿Es posible establecer un grosor de línea más pesado para el paso de línea?

Si no, ¿qué alternativas debería considerar, como una superposición de imágenes, por ejemplo?

Answer 1

Creo que esto es un problema de implementación del navegador.

Ver esta página http://jsbin.com/arucu5/2/edit

En IE8 y Firefox la línea a través anchura aumenta con el tamaño de fuente. Sin embargo en Safari y Chrome se mantiene en 1px

Puede siempre un método Ghetto sucia como esto http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

Answer 2

Aquí hay otra manera de hacerlo con una falsificación de penetración (que se ve muy bien y funciona en todos los navegadores , aunque con el costo de una pequeña carga de imagen). La imagen es un cuadro negro de 1px por 2px.

del { 
    background: url(/images/black-1x2.png) repeat-x 0 10px; 
} 

Answer 3

Esto debería funcionar:

<style> 
span.strike { 
     font-weight:bold; /*set line weight here*/ 
     color:red; 
     text-decoration:line-through; 
} 

span.strike>span { 
     font-weight:normal; 
     color: black; 
} 
</style> 

<span class="strike"><span>$20.00</span></span> 

Answer 4

se puede hacer algo como esto en los navegadores modernos

.strike{ 
    position: relative; 
} 

.strike::after{ 
    content: ''; 
    border-bottom: 4px solid red; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 100%; 
} 


I <span class="strike">love</span> hate hotdogs 

hecho un violín de ella también: http://jsfiddle.net/TFSBF/

Answer 5

que he encontrado otro enfoque para ajustar el grosor de línea para el texto de varias líneas:

span { 
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII='); 
    background-repeat: repeat-x; 
    background-position: center; 
} 

Aquí es un ejemplo: http://output.jsbin.com/weqovenopi/1/

Este enfoque supone la repetición de una imagen (anchura de 1 píxel y la altura npx). También funciona de forma independiente en el tamaño de fuente.

Solo una desventaja: el fondo se representa debajo del texto.