Question

您如何在原始HTML / CSS中创建它？

<!DOCTYPE html>
<html>
<head>
<style>

div {
    text-decoration: line-through;
    width: 50px;
}


</style>
</head>
<body>

<div></div>

</body>
</html>

看起来您不能将文本修饰应用于div。这有意义，因为它不是文本。是否有任何边界中间特征？

Answer 1

我刚刚在这里回答了类似的情况text of indeterminate length and line in HTML/CSS the "right" way

如上所述，解决方案可以是在div或标题中具有跨度，该跨度具有在：before或：after伪元素中设置的背景，然后跨度中的文本可以位于具有白色背景的顶部。希望这能解决您的问题并回答您的问题。

http://jsfiddle.net/7o6c4gvg/

h3 {
    display:block;
    position:relative;
    width:100%;
}
h3:after {
    content:"";
    height:1px;
    width:100%;
    background: #000;
    position:absolute;
    top:50%;
    left:0;
}
h3 span {
    background:#fff;
    display:table;
    margin:0 auto;
    position:relative;
    z-index:9;   
}

中边界的想法，强调中间

1 个答案: