Question

如何制作删除线更多例如

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

图片的

View my fiddle 因为发布图片需要10点声望。

Answer 1

你不能用删除线来做。我的一个项目我有相同的要求，我已经用一些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

Answer 2

如果您的文字只有一行，则可以使用：

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

HTML：

<stricken>HELLO</stricken>

SASS：

stricken {
    position:relative;

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

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

Answer 3

文字修饰：线穿过;不支持线的定位。所以，我们不能做任何改变，它也取决于字体。可能作为一种解决方案我们可以做的是用边框替换线并根据您的需要定位

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

Refer this:-

http://jsfiddle.net/sFPxL/

使删除线更加严重

3 个答案: