时间戳

首页 > 解决方案 > 范托尔三振失败

html - 范托尔三振失败

问题描述

我在删除的文本中没有得到预期的决定性 X。

这是我的测试代码。“风格”中的所有内容都是直接从 VanToll 复制的，但不会删除任何内容。显然，我不明白 ::css 单词的某些内容。我遗漏了什么？

<!DOCTYPE html><html lang="en"><head>
<title>X-out test</title>
<meta charset="UTF-8">
<style>
/* Emphatic X-shaped strike-out */
/* https://www.tjvantoll.com/2013/09/12/building-custom- 
text-strikethroughs-with-css/ */

.cross {
position: relative;
display: inline-block;
}
.cross::before, .cross::after {
content: '';
width: 100%;
position: absolute;
right: 0;
top: 50%;
}
.cross::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.cross::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
}
</style> </head> <body>

<h3><cross>This section-header should be struck out!</cross> 
</h3>

</body> </html>

VanToll 建议“如果您尝试使用实时 jsFiddle 和/或 jsBin 以使其正常工作，它也会有很大帮助”，但我不知道这些 js... 操作是什么。（我是用 HTML 编写学术书籍的作者，而不是真正的程序员。）

旧的备用“s”在“cross”出现在上方时工作，但有一半时间它显示为文本下部衬线上方的 1 像素线，在那里它可能被视为混淆的下划线。

作为记录，我在 2013 年 27"-iMac 上的 High Sierra 10.13.6 下使用 BBEdit 编写，Firefox 是我常用的浏览器，尽管有六个其他浏览器也可以使用。请参阅 http://electromontis.net/evoligion/_D /D15.shtml#17 是一个位置不佳的三振出局示例。

标签： htmlcss

解决方案

尝试如下调整您的代码：

<h3 class="cross">This section-header should be struck out!</h3>

注意添加class="cross"和删除<cross>and</cross>

推荐阅读