程序员经验分享-hwhale

如何改变CSS中的删除线/穿线粗细？

2023-12-26

我正在使用text-decoration: line-through在 CSS 中，但我似乎找不到任何方法来改变线条粗细，而不需要像<hr>或图像叠加。

有没有优雅的方法来指定穿线的粗细？


现代的解决方案是使用文字装饰厚度 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness财产。

text-decoration-thickness: 1px;

您还可以使用以下命令更改颜色文字装饰颜色 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color财产。

text-decoration-color: #ff0000aa;

对于较旧的浏览器，您可以使用以下解决方法之一：

这是一个纯 CSS 方法，不需要任何不必要的包装元素。作为额外的好处，您不仅可以调整删除线的粗细，还可以与文本颜色分开控制其颜色：

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid red;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

使用 RGBa 颜色使删除线半透明：

.strikeout {
  font-size: 4em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

或者甚至使三振成为渐变！只需使用一个background结合一个height，代替border:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));
  content: "";
  height: 0.125em;
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

这适用于 IE9（无渐变）及更高版本 - 如果您使用单冒号，甚至 IE8:after语法并手动写出否定margin-top值而不是使用calc().

主要缺点是这只适用于单行文本。但是，嘿，你拿走你能得到的；-)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

strikethrough

如何改变CSS中的删除线/穿线粗细？ 的相关文章

  • 页面中的所有 css 类都使用 js

    我希望能够获取页面上所有CSS文件的所有类名 是否存在任何现有的可能性 或者我必须自己阅读并解析它 浏览器没有api吗 也许是重复的请求 如何使用 JavaScript 读取 CSS 规则值 https stackoverflow com

  • 将 Bootstrap 导航栏列表项包裹在居中的品牌图像周围

    我整晚都在搞乱这个问题 没有解决办法 我正在使用 bootstrap 2 32 对于 joomla 模板 尚不支持 BS3 并且我将拥有动态数量的列表项 我需要将列表项居中 但也同样包裹在中心 brand img 的左侧和右侧 我可以把它分

  • 使用 Node-sass 缩小 CSS

    我在 NodeJS 项目中使用 SCSS 并让我的脚本使用以下命令将所有单独的 SCSS 文件转换为单个 CSS 文件 node sass w public css scss style scss public css style css

  • JavaFX HTMLEditor - 插入图像功能

    我正在使用 JavaFX 集成的 HTMLEditor 它具有的所有功能都很好 但我还需要具有在 HTML 文本中插入图像的功能 你知道我可以使用的一些来源吗 或者其他一些可以在 JavaFX 中使用的 HTML WYSIWYG 编辑器并且

  • jQuery 可以使用结束标签作为选择器吗？

    我对 jQuery 还很陌生 我遇到了这个 jQuery 代码 它使用 div div 作为选择器 div div html someString text 首先 我想知道它是否是一个合法的标签 因为div有一个结束标签 但我的主要问题 j

  • 如何替换通过 JS 显示的图像？

    我想嵌入 Wanelo 的分享按钮 这是嵌入代码 a class wanelo save button href wanelo com a 当我嵌入它时 我得到这个按钮 我想用他们的图标替换该按钮 如下所示 作为 JS 的新手 我无法理解如

  • 让浏览器缓存我的动态 PHP 样式表

    我想在 PHP 文件 styles php 中创建一个样式表 以便样式表变得动态 具体取决于请求的用户 对于每个单独的用户来说 样式表是不变的 因此应该缓存在他的客户端浏览器上 我读过 您可以通过设置内容类型和缓存控制等标头来实现此目的 但

  • 如何使 superfish 下拉菜单响应式？

    我正在使用带有骨架框架的 superfish 下拉菜单 我希望它也能在手机上运行 默认情况下 它显示下拉项目 但它将鼠标悬停在其下方的项目上 我想以某种方式拥有它 以便它将父项推到它下面 有什么解决办法吗 这是一个更好的答案 我能够将 Su

  • 使用 CSS 让图像位于文本后面并使其保持在中心位置

    我正在创建一个网页 其中有一个要放置在中心的图像 在该图像的顶部 我想要有输入框 标签和提交按钮 我正在尝试使用这个CSS img center z index 1 但这不起作用 当我将代码更改为 img center position a

  • 如何在 html 中设置 alt 工具提示的样式？ [复制]

    这个问题在这里已经有答案了 是否可以为 alt 属性设置工具提示的样式 我希望为 html 设置背景 字体颜色等样式alt属性 有人可以帮我解决这个问题吗 您无法设计默认的工具提示 即设置样式alt属性 但你可以使用 Javascript

  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式

  • 找不到模块：您尝试导入位于项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入

    我刚刚开始React JS 但是我遇到了一个问题 尽管我进行了研究 但我无法得到结果 我尝试了很多方法 但我一直无法解决这个问题 你能帮忙吗 这是我在终端收到的错误 src App css node modules react script

  • 覆盖 Bootstrap 表格边框折叠样式

    引导程序有一个table border collapse collapse border spacing 0 风格 我想覆盖它 所以我创建了一个类并将其应用到有问题的表 table FormGroupContainer border col

  • CSS问题-水平滚动条隐藏内容

    我对此有一个问题 因为它给了我滚动条 但高度保持不变 因此文本被滚动条覆盖 td class messages div style border 0px padding 0px width 100 background color 66C2

  • border-radius 在 safari 下失败（丑陋的剪辑）

    有人知道 Safari 中以下 错误 的解决方法吗 当我使用border radius在 CSS3 中创建圆角边框 它在 Safari FF 等上工作得很好 但是 当边框颜色是背景颜色时 您可以看到容器背景与边框重叠 你可以在这里尝试一下

  • HTML5 Safari iOS 仅访问相机而不访问照片库

  • 如何在块元素之间添加垂直间距，但不添加顶部和底部

    假设我有一堆 P LI 或 DIV 元素 它们之间没有任何内容 我想控制它们之间的垂直间距 这样它们就不会贴得那么紧 但我不想添加任何顶部和底部空间 因为这是由父元素处理的 我不需要更多 有没有一种适用于所有块元素的简单方法 假设我有这样的

  • 重定向后 HTML5 CORS 请求在 safari 中失败

    我正在使用 jQuery 制作 CORS 请求来完成 SSO 类型系统 用户登录 WordPress 同时使用钩子也登录 Moodle 我遇到的问题是 在 Safari 中 仅限 safari 7 当初始 POST 请求设置为 mudles

  • 网页优化：为什么组合文件速度更快？

    我读过 将所有 css 文件合并为一个大文件 或将所有脚本文件合并为一个脚本文件 可以减少 HTTP 请求的数量 从而加快下载速度 但我不明白这一点 我认为如果你有多个文件 最多有一个限制 我相信在现代浏览器上是 10 个 浏览器会并行下载

  • 如何让JS变量在页面刷新后保留值？ [复制]

    这个问题在这里已经有答案了 是否可以永久更改 JavaScript 变量 例如 如果我设置变量 X 并使其等于 1 然后按钮的 onClick 将该变量更改为 2 如何使该变量在刷新页面时保持为 2 这是可能的window localSto

随机推荐

  • RSpec 错误“未初始化常量 FactoryGirl（名称错误）”

    我尝试运行 RSpec 测试 rspec comments rb 但不断收到相同的错误 见标题 在有人问之前我已经添加了require factory girl到spec helper rb 的内容spec factories commen

  • 为什么我无法在 Raspberry Pi 上安装任何带有 GHC 7.8.4 的软件包？

    根据这个帖子 http www reddit com r haskell comments 35bw0b at last debian unstable has working arm ghci and 终于有一个支持模板 haskell

  • ASP.Net MVC 3.0 Ajax.ActionLink Onbegin 函数 true 执行操作？

    我有一个 Ajax Action 链接 它将调用一个 action 方法 在我的 Ajax 选项中 我调用了一个验证函数 如果这个函数返回 true 那么只有我想要执行此操作 不知道如何完成此操作 我的 Ajax ActionLink Aj

  • android 未加载广告时使用空间

    我正在尝试在我的应用程序中添加 admob 广告 但是当我没有连接到互联网时 那里的空间太空了 我希望添加在加载后出现 直到广告空间应由其余元素利用 该怎么办 我的活动文件如下 MainActivity java package com t

  • LL(1) 不能有歧义

    如何证明 LL 1 文法不能是二义性的 我知道什么是二义性语法 但无法证明上述定理 引理 这是我的校样初稿 它可能需要一些微调 但我认为它涵盖了所有情况 我认为许多解决方案都是可能的 这是一个直接的证明 旁注 遗憾的是 SO 不支持数学 例

  • 在字符串中使用希伯来字符

    我想在 R 的字符串中使用希伯来字符 我使用了以下内容 gt a lt c gt a 1 gt class a 1 character 可以看出 当我输出字符串内容或使用任何函数时 我会得到 Jibbrish 如何使用希伯来语字符 感谢所有

  • 高效适配器有java.lang.ClassCastException吗？

    看完后here http www google com events io 2009 sessions TurboChargeUiAndroidFast html我尝试实现自己的高效适配器 我的 ViewHolder 类几乎相同 stati

  • System.Collections.Generic.KeyNotFoundException：字典中不存在给定的键

    对方法执行单元测试时 我收到上述错误消息 我知道问题出在哪里 只是不知道为什么字典中没有它 这是字典 var nmDict xelem Descendants plantNS Month ToDictionary k gt new Tupl

  • 有人可以向我解释一下匿名方法吗？

    Delphi 2009 中还有一些很酷的东西 其中之一就是新增了匿名方法 我已经看过有关匿名方法的示例和博客文章 但我还没有明白 有人能解释一下为什么我应该感到兴奋吗 请看一下closures http en wikipedia org w

  • Android Drawable：在 XML 文件中以百分比形式指定形状宽度？

    我正在尝试创建一个简单的 Drawable 我想将其设置为视图的背景 使用设置背景Drawable 我只是想将可绘制的背景分成两个相等的矩形 50 50 第一个要填充黑色 第二个要填充白色

  • 使用 cplex 在 java 中定义二元决策变量

    我正在尝试使用 cplex 在 java 中定义二元决策变量 这是一个二维变量 这意味着如果一条路径从特定站点开始 则它应该为 1 否则为 0 我有一组站点 J 和一组路径 K 我的决策变量是 Z jk 目前我正在定义如下代码 但它不起作用

  • Perl chdir 不起作用

    之前的一篇文章可能有用 Perl system 调用失败 返回代码 65280 https stackoverflow com questions 11989196 perl system call failed with return c

  • 如何在 NativeScript 中访问 Google Play 服务

    我目前正在从 NativeScript 开始 我正在尝试将某些 Google Play 服务包含到 android 项目中 我将相关的 aar 文件放入我的应用程序项目的 node modules 文件夹中并构建它 我可以看到它们已成功添加

  • 将 mongo 中的大写字母更改为驼峰式大小写？

    我有一个名为 User 的集合 其中包含字段 FirstName 和 SecondName 但数据是大写字母 firstName FIDO secondName JOHN 我想知道是否可以将字段制作成骆驼箱 firstName Fido s

  • 打印 `awk` 中的倒数第二列/字段

    我想打印倒数第二列或字段awk 字段的数量是NF多变的 我知道我应该能够使用 NF 但我不确定如何使用它 这似乎不起作用 awk print NF awk print NF 1 应该管用

  • 使用 SQL*Loader 更新表中的列

    我编写了一个具有以下查询的 SQL 脚本 查询工作正常 update partner set is seller buyer 1 where id in select id from partner where names in A B C

  • 将字母转换为数字

    我想将字母 A 更改为点 1 将字母 Z 更改为数字 26 然后再次更改为数字 27 字母 AA AB 更改为 28 我该怎么办 我必须使用 开关 吗 我使用java程序 没有对此进行测试 但按照这些思路应该可以工作 public Stri

  • 在 Play 2.0 中设置自定义根 URL

    我有一个 play 应用程序 如果它是 Web 主机的根目录 则可以运行 但是我想将其作为主机的子 URL 加载 That is http example com lt This works fine and i want to move

  • 求助......串口编程

    我想用 python 与我的串口进行通信 我为linux安装了pyserial和uspp 尽管如此 当我运行以下代码时 import serial ser serial Serial dev pts 1 19200 timeout 1 pr

  • 如何改变CSS中的删除线/穿线粗细？

    我正在使用text decoration line through在 CSS 中 但我似乎找不到任何方法来改变线条粗细 而不需要像 hr 或图像叠加 有没有优雅的方法来指定穿线的粗细 现代的解决方案是使用文字装饰厚度 https devel

热门标签