Czy jest możliwe określenie ciężaru linii dla "dekoracji tekstu: line-through;" w CSS?

Question

Domyślna waga 1px dla właściwości line-through w CSS doskonale nadaje się do kopiowania treści w 1em.

Niestety dla większych przedmiotów, takich jak cena ustalona na 3em na stronie z ofertami, 1 piksel jest naprawdę zbyt jasny. Czy możliwe jest ustawienie cięższej linii dla linii prostej?

Jeśli nie, jakie alternatywy należy rozważyć, na przykład nakładanie obrazu?

Answer 1

Myślę, że jest to problem z implementacją przeglądarki.

zobaczyć tę stronę http://jsbin.com/arucu5/2/edit

w IE8 i Firefox Linia przez szerokość wzrasta wraz z wielkością czcionki. Jednak w Safari i Chrome pozostaje na 1px

Można zawsze brudna metoda Ghetto jak ten http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

Answer 2

Oto kolejny sposób to zrobić z fałszywymi strike-through (który wygląda świetnie i działa na wszystkich przeglądarkach , choć kosztem maleńkiego imageload). Obraz jest czarnym pudełkiem 1px na 2px.

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

Answer 3

To powinno działać:

<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

można zrobić coś takiego w nowoczesnych przeglądarkach

.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 

popełnił skrzypce z nim zbyt: http://jsfiddle.net/TFSBF/

Answer 5

Znalazłem innego podejścia, aby ustawić grubość linii tekstu wielowierszowego:

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

Oto przykład: http://output.jsbin.com/weqovenopi/1/

Takie podejście zakłada powtarzanie obrazu (szerokość 1px i wysokość NPX). Działa również niezależnie od rozmiaru czcionki.

Tylko jedna wada - tło wyświetla się pod tekstem.