使删除线更向下[重复]答案

【问题标题】：Make a strikethrough line go more down [duplicate]使删除线更向下[重复]
【发布时间】：2014-02-01 07:09:35
【问题描述】：

例如，我怎样才能使删除线更向下

<p style="text-decoration: line-through;">HELLO</p>

View my fiddle 用于图片，因为我需要 10 声望才能发布图片。

【问题讨论】：

stackoverflow.com/questions/2503364/…
@megawac 它没有我需要的答案
@mplungjan 我搜索过，但搜索结果如下：stackoverflow.com/…
stackoverflow.com/search?q=strike-through+position
我刚回复here，使用CSS定位

标签： html css

【解决方案1】：

如果您的文本只有一行，这将起作用：

http://jsfiddle.net/delvarworld/KmE4q/

html:

<stricken>HELLO</stricken>

萨斯：

stricken {
    position:relative;

    &:after {
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:32px;
        height:4px;
        background:#000;
        display:block;
    }
}

如果您的文本是多行，则需要将每一行包装在 <striken> 标记中，而不是依赖浏览器自动换行。

【讨论】：

我使用的是 css 而不是 sass
那就停止使用css，开始使用sass

【解决方案2】：

你不能用删除线来做到这一点。我的一个项目有同样的要求，我用一些 css 技巧完成了它，但这不是一个好习惯。

html

<div>HELLO<hr/></div>

css

div{
    position:relative;
    display:inline-block;
}
hr{
    position:absolute;
    top:11px;
    left:0;
    display:inline-block;
    width:100%;
}

jsFiddle Code

【讨论】：

但是如果我把 font-size 变大会怎样
将 hr 行顶部位置设为 58%，它在所有字体大小下都可以正常工作。

【解决方案3】：

text-decoration:line-through;不支持线的定位。所以，我们不能做任何改变，它也取决于字体。可能作为一种解决方案，我们可以做的是用边框替换线条并根据您的需要定位它

.center:after {
border-top: 1px solid #000;
position: absolute;
content: "";
right: 0;
top:65%;
left: 0;
}

Refer this:-

http://jsfiddle.net/sFPxL/

【讨论】：