Question

我在删除的文字中没有得到预期的决定性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 举一个糟糕的罢工的例子。

Answer 1

尝试如下调整代码：

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

请注意添加了class="cross"，并删除了<cross>和</cross>

Answer 2

您的CSS代码像div标签一样，但您的html代码不匹配。

尝试一下

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

Answer 3

上面/下面的修复在我解决之后运行良好，持续了 3 年。（顺便说一句，我现在使用的是 macOS Catalina 10.15.7 和 BBEdit 13.5.6。）我使用删除线代码来强调描述不存在的功能的 HTML 书籍一章的目录中的某些部分（html原始查询中的链接不再有效）。 ToC 是一个无序列表，采用 3 列“报纸”格式，有一天，被划掉的 6 个条目只是空白。我有一段时间没有看那一章，所以我不知道它发生了什么或何时发生。

我现在能做的最好的事情就是让一个这样的三振出局划掉 ToC 中的第一个条目。

报纸代码：

.newsp {
padding-left; 1.5mm;
column-gap;  2mm;
column-count: 3;
column-width: 33%;
line-height: 2.3;
font-size: 10pt;
font-family: Arial, Verdana, sans-serif;
list-style-type: none;
border: black solid 1px:
}

划掉代码：

.x   {
position: relative;
display; inline-block;
}
.x::after   {
content:"";
width: 14%;
position: absolute;
left: 1.05in;
top: 53%;
border-top: 2px solid red;
-webkit-transform: skewY(-4deg);
moz-webkit-transform: skewY(-4deg);
ms-webkit-transform: skewY(-4deg);
o-webkit-transform: skewY(-4deg);
transform: skewY(-4deg);
}

这一切都集中在 ToC 的中间：

<li><a href-"#y27"><span class="x">Section 11</span></a>
<li><a href-"#y28"><span class="x">Section 12</span></a>
<li><a href-"#y29"><span class="x">Section 13</span></a>

但它所做的只是在列表中留下空白行。

更令人困惑的是，名称“x”曾经可以正常工作。现在我得到了一条具有正确角度、长度和颜色的单行，我可以说服它划掉列表第一列中的第一个条目——无需在 HTML 代码中特别提及“x”< /strong>（在我删除了对“x”的所有调用之后）。如果我重命名它，比如“xx”，我得到的只是空白。在 HTML 代码中的任何地方苦苦搜索打字的“x”，结果一无所获。当它被命名为“x”时，我可以调整它的角度、颜色等细节，但我无法将它移动到报纸台上的适当位置。我知道 Powweb，我的网络服务，重写了我的 HTML 代码，虽然他们似乎不想谈论这个，但我需要保证我没有错过关于 CSS 和 HTML 的新东西。或者做了一些我看不到的完全愚蠢的事情。

--Ferren 20210622 at 00:00:15

范·托尔（Van Toll）的<cross>三振出局失败

3 个答案: