Как изменить высоту прогона линии

Question

Вчера с одним другом обсудите для изменения высоты линии о пробитии. Сегодня поиск по documentation из CSS говорит:

The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it. 
Use the <s> element to represent things that are no longer relevant or no longer accurate. 
However, <s> is not appropriate when indicating document edits; 
for that, use the <del> and <ins> elements, as appropriate. 

И кажется, что <s> принимают все ссылки на CSS, но не работает на высоте.

CSS:

s { 
    color: red; 
    height: 120px 
    } 

HTML:

<br /><br /> 
<s >Strikethrough</s> 

Существует более простой demo on JSFIDDLE и вы видите, что не изменить высоту строки ....

Там это альтернативное решение или я ошибаюсь в CSS?

EXPLAIN С IMAGE

Answer 1

Это моя альтернативная версия.

s { 
     color: red; 
     position: relative; 
     text-decoration: none; 
     } 

s:after { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: -10px; 
    content: " "; 
    background: red; 
    height: 1px; 
} 

JSFiddle demo

Answer 2

Попробуйте

s { 
    color: red; 
    text-decoration: none; 
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px); 
    height: 100px 
    } 

Answer 3

Я хотел бы сделать это раньше, и пришел с этим:

<span class="strike"> 
    <span class="through"></span> 
    Strikethrough 
</span> 

и:

.strike { 
    position:relative; 
    color:red; 
} 

.strike .through { 
    position:absolute; 
    left:0; 
    width:100%; 
    height:1px; 
    background: red; 
    /* position of strike through */ 
    top:50%; 
} 

JS Fiddle here

, и если вы хотите, многократный удар прошлифованных вы можете использовать что-то вроде этого:

JS Fiddle - multi strikes

Answer 4

Я думаю, что лучший способ справиться с этим является использование псевдо-элемент для моделирования желаемое поведение.

s { 
    color: red; 
    display: inline-block; 
    text-decoration: none; 
    position: relative; 
    } 
s:after { 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 50%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 3px solid; 
} 

Граница наследует текстовый цвет, и вы получаете полный контроль над своим стилем, включая эффекты зависания.

JS Fiddle here