文本后面有粗下划线

2024-06-19

如何使用 span 和 css 在文本 ABC 后面重现这种下划线?

我已经能够做下划线below嵌套的文本span和彩色的border-bottom,但无法获取behind图像和above文本基线。

<p style='font-size:100px'>
  <span style='border-bottom:30px magenta solid'><span>A</span></span>
  <span style='border-bottom:60px magenta solid'><span>B</span></span>
  <span style='border-bottom:90px magenta solid'><span>C</span></span>
</p>

另一种可能性:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}
<p>
  <span>A</span><span>B</span><span>C</span>
</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

文本后面有粗下划线 的相关文章

  • 用于二进制数据传输和解码的 websocket

    我正在阅读规范和许多有关 websockets 使用的示例 几乎所有的人都谈论使用 websockets 进行 UTF 8 或 ascii 消息传输 最新的 Hybi websocket 规范要求支持二进制传输 Hybi 规范中的 REQ
  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗?

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display
  • 如何在 Selenium 中使用 CSS 选择器查找非根元素的直接后代?

    我正在尝试重用找到的 WebElement table 下面来搜索它的后代和直系后代 table tbody tr td div foo div td tr tr td td tr tbody table table
  • 当内容悬停时变为粗体时防止表格扩展

    我正在处理一张表格 其中一个要求是每一行在悬停时变为粗体 我可以正常工作 但是当发生这种情况时 列的宽度会发生变化 有什么办法可以防止这种情况发生吗 table width 100 border 1px solid ccc margin t
  • 如何创建带有可点击标签的复选框?

    如何创建带有可单击标签的 HTML 复选框 这意味着单击标签可打开 关闭复选框 方法一 包裹标签标签 将复选框包裹在label tag
  • 根据id统计div元素

    我有一个类似的页面 div div div div div div div div div div div div 我想知道 id 与表达式 box content X text 其中 X 是数字 匹配的 div 的数量 我可以使用纯 ja
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 通过span标签动态包装js字符串,这可能会在React中危险地渲染

    我有一个字符串 我想使用 aria label 标签将 span 标签单独添加到字母表中 最终结果将在 React 中危险地呈现 请指教 这就是我所拥有的 const str D C B B const addAriaLabels str
  • 溢出-x 不工作

    我正在尝试为我的画廊实现一个滑块 目前 CSS 存在溢出 x 无法正常工作的问题 我想要一个水平滑块而不是垂直滚动 这是fiddle http jsfiddle net nevinm 6H43f 请务必看一下 testimg height
  • 错误:使用本地文件时,summernote 不是一个函数

    我遇到了一个非常奇怪的问题 当我使用本地的 Summernote 文件加载文本编辑器时 发生了 summernote 不是函数 的情况 但是 如果我使用 cdn 文件加载编辑器 一切都会顺利 这是我的 HTML 标头代码
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 如何在html5画布中向前和向后移动圆圈中的对象?

    我正在 html5 canvas 中开发一个小应用程序 我需要使用键盘按键以圆周运动移动对象 我可以使用键盘按键移动对象 但存在错误 该对象不会从同一位置向后或向前移动 任何人都可以帮助我完成此操作 请检查以下代码 任何形式的帮助将非常感激
  • 使用 CSS 显示 div 内容后淡出

    我正在尝试在单击按钮时显示通知 单击按钮实际上会检查电子邮件验证 我知道要显示一个包含错误消息内容的 div 但是 我想淡出错误消息 比如说 5 秒后 我想用CSS来实现它 以下是我的尝试 它只是隐藏了一切 signup response
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 将 javascript 对象分配给 html 元素的最佳方法

    我通过 ajax 获取一个 javascript 对象 我需要将此对象附加到 div 以便稍后恢复 例如 在单击事件上 如果我有一个变量而不是一个对象 我会将它推入 html 标签 如下所示 div div 我会像这样恢复它的价值 var
  • jQuery find() 只返回第一个匹配的结果?

    我在 jQuery 中使用 find 方法 但无法获得与选择器条件匹配的所有结果 这是我的 HTML div class something div
  • 关于调试打印样式表的建议?

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri
  • HTML5 中填充笔划的透明度

    我正在 HTML5 中开发一个涂鸦应用程序 我想做一种桶功能 这个想法是绘制一条路径 它将被关闭并用选定的颜色 描边的颜色 填充 它对于纯色效果很好 但如果我想要透明的描边和填充 我会遇到这个问题 所发生的情况是填充完成到笔划的中间 路径的

随机推荐

  • asp.net c# 防止在从服务器端代码更改索引时触发 selectedindexchanged 事件

    我在同一个 aspx 页面上有两个下拉列表控件
  • PyQt5按钮lambda变量变成布尔值[重复]

    这个问题在这里已经有答案了 当我运行下面的代码时 它显示如下 为什么 x 不是 x 而是变成布尔值 这种情况仅发生在传递到用 lambda 调用的函数中的第一个参数上 错误的 y home me model some file from P
  • 读/写带有特殊字符的.txt文件

    I open Notepad Windows 并写 Some lines with special characters Special 并前往另存为 someFile txt 与Encoding set to UTF 8 在Java中我有
  • 从另一个类向主类发出信号

    当它处于Worker 类 def run self 方法 一切运行良好 while 循环能够循环并每 1 秒发出一个信号 那么标签在收到信号后就会更新 我决定尝试将 while 循环放置在另一个名为循环 methodA 的类中 这是为了尝试
  • 如何将图像放入此 UIPickerView 中?

    我不知道如何创建一个在文本一侧带有图像的自定义 UIPickerView 我一直在寻找一种方法 我刚刚发现了这个 UIView pickerView UIPickerView pickerView viewForRow NSInteger
  • Selenium - 等待网络流量

    我们将 Selenium 与 Java API 和一些 Javascript 用户扩展一起使用 我们在应用程序中使用了大量 AJAX 调用 我们的许多测试随机失败 因为有时 AJAX 调用完成得比其他时候慢 因此页面未完全加载 我们通过等待
  • 当在 Repository/UnitOrWork 之上使用 Service 类时,我应该在哪里放置逻辑不适合 Repository 的常用数据访问代码?

    In my 先前的问题 https stackoverflow com questions 24906548 using the generic repository unit of work pattern in large projec
  • 如何模板化 Select2 的预选值

    我预先选择的值Select2 https select2 org如下所示 function formatState state console log state text2 I found undefined here console l
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 如何删除控制台中打印的字符

    我一直在搜索如何用其他语言执行此操作 发现必须使用特殊字符 b 来删除最后一个字符 如何删除控制台应用程序中打印的字符 linux https stackoverflow com questions 430713 how do i eras
  • 如何在 Django 中执行 SELECT MAX?

    我有一个对象列表 如何运行查询来给出字段的最大值 我正在使用这段代码 def get best argument self try arg self argument set order by rating 0 details except
  • android 媒体播放器 - 如何禁用范围请求? (Nexus 7 上的音频流中断)

    我有一个音频流应用程序 它运行本地代理服务器 本地代理服务器与互联网流媒体源建立 http 连接 在本地获取并缓冲流数据 然后 在应用程序内部 我使用 MediaPlayer 连接到本地代理服务器 使用方法 mediaPlayer setD
  • 无法通过 LINQ to Entities 使用某些功能?

    我正在尝试使用 LINQ 查询在项目上实现搜索功能 由于数据有时包含带有重音符号和其他符号的字符 因此我创建了一种方法来删除这些字符以进行搜索 这是我的代码 var addresses from a in db Addresses join
  • 如何使用 PHP 正确添加跨站请求伪造 (CSRF) 令牌

    我正在尝试为我网站上的表单添加一些安全性 其中一个表单使用 AJAX 另一个表单是简单的 联系我们 表单 我正在尝试添加 CSRF 令牌 我遇到的问题是令牌有时只显示在 HTML 值 中 其余时间 该值为空 这是我在 AJAX 表单上使用的
  • 将 sf voronoi 多边形裁剪到边界框时出错

    我正在尝试将 voronoi polygons 使用 sf package 创建 剪辑 到边界框 但它引发了我无法定义的错误 我对 R 的空间世界不太有经验 感谢所有帮助 样本数据 stations lt structure list ST
  • 检查 IP 地址是否在给定范围内

    我想检查一下是否有IP180 179 77 11位于特定范围之间 例如180 179 0 0 180 179 255 255 我编写了一个函数 它将每个 IP 八位字节与其他八位字节进行比较 def match mask IP min ip
  • AFNetworking XML 请求问题

    我在用着AFNetworking 2使用 JSON 响应 它工作正常 现在我必须将其转换为 XML 而不是使用 JSON 因为服务器响应是 XML 格式的 在我搜索之后 我找到了这段代码 但它不起作用 与 Charles 我发现请求是错误的
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p