如何改變線條的穿透高度

昨天和一位朋友討論換線高度的問題。今天對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

如何改變線條的穿透高度

回答

相關問題