如何改变线条的穿透高度

昨天和一位朋友讨论换线高度的问题。今天对CSS的documentation搜索说：如何改变线条的穿透高度

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 WITH IMAGE

enter image description here

来源

2014-09-10 Mirko Cianfarani

@Harry已经读过这个问题，并没有说行的高度。 – 2014-09-10 08:43:39

哦，好的。在这种情况下，Hashem的答案是否能解决您的问题？如果不是的话，你能否澄清一下你正在寻找的身高？ – Harry 2014-09-10 08:46:36

我想改变线条上方的线的高度。 – 2014-09-10 08:50:25

这是我的另一个版本。

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

来源

2014-09-10 08:44:35

嗯好的选择，但与CSS工作更好 s：后{ 位置：绝对; left：0; right：0; top：5px; 内容：“”; 背景：红色; height：8px; } – 2014-09-10 09:04:03

试试这个

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

来源

2014-09-10 08:44:41 Shafeeque

这种替代解决方案的工作，但必须改变“透明” – 2014-09-10 08:58:19

我想之前做到这一点，本想出了：

<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

来源

2014-09-10 08:45:57 MikeeeGeee

从顶部的位置不一定在百分之百。您可以以像素为单位设置**。strike **的行高，并使用**。through **顶部位置的像素值。 – MikeeeGeee 2014-09-10 08:52:06

Mikode，我建议看看'currentColor'关键字，它有助于根据'color'属性的值为* line *着色。另外增加一个负边距使它看起来更好：http://jsfiddle.net/hashem/xwym515p/2/ – 2014-09-10 08:58:40

完美的解决方案对你有好处...... – 2014-09-10 08:59:37

我觉得处理这样的最好的办法就是使用伪元素来模拟期望的行为。

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

来源

2014-09-10 08:57:54

好的解决方案... !!!! – 2014-09-10 09:06:07

如何改变线条的穿透高度

回答

相关问题