如何在
CSS 中正确定位箭头

2024-05-02

我想更改详细信息中出现的箭头的位置。我尝试过 float:left 但如果线条太大(如上面示例中的线条),则当我调整窗口大小时,箭头将移动到下方线条的开头。我希望它保留在第一行的第一个字母之外。

我怎样才能做到这一点?

Example:

<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
  gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis. 
 </summary>
  Content goes here.
</details>
<style>
 summary::-webkit-details-marker {
 display: none
}
 summary:after {
 content: "+";
 color: #fff;
 float: left;
 }

 details[open] summary:after {
 content: "-";
 }
</style>

use :before代替:after

 summary::-webkit-details-marker {
 display: none
}
 summary:before {
 content: "+";
 color: red;
 float: left;
 margin-right: 10px;
 }

 details[open] summary:before {
 content: "-";
 }
<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
  gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis. 
 </summary>
  Content goes here.
</details>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在
CSS 中正确定位箭头 的相关文章

  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 从 HTML div 中删除所有文本内容,但保留 HTML 标签和结构

    I have div Here a href is a p Text that I want to p be removed div I want div a href a p p div 删除所有文本但保留 HTML 结构的最简单方法是什
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 使用 JSON 文件动态更新 HTML 内容?

    我想创建一个 JS 循环 使用 jQuery 来查看 JSON 文件 并根据是否 div ids 与 JSON id 值匹配 这需要易于扩展并且无论有多少人都可以工作 div 添加了盒子 我有一个 HTML 文件 设置如下 div clas
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 有没有办法在 html 图像标签中显示位图数据? [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互

随机推荐

  • 将日期时间模型属性显示为短日期时间字符串

    我是 MVC2 新手 并且遇到格式问题 我的 Employee 模型中有一个 DateTime 属性 我希望与短日期时间一起显示 然而 这似乎不是正确的方法 1 div class editor field 2 3 4 div 第 2 行抛
  • Rails 数据库默认值和布尔字段的模型验证

    在 Rails 模型中我有一个属性is subscriber 当我构建数据库迁移以将此列添加到数据库时 我指定默认值为 false t boolean is subscriber default gt false 我还在模型中指定了该属性需
  • 如何在 Powershell 中为特定命令设置别名?

    有一个命令我经常输入 java jar foo param1 param2 param n 如何创建命令别名来运行此命令 如下所示 launch foo param3 where launch foo被翻译成完整的命令 你必须创建一个函数
  • 表视图重新加载部分崩溃

    我有一个包含 4 个部分的表格视图 每个部分有 1 2 个表格视图单元格 第一个单元格有一个 uiswitch 作为附件视图 控制应用程序的颜色主题 在白天模式和夜间模式之间切换 一旦按下开关 就会调用一个函数 更改导航栏的颜色和背景颜色
  • Docker容器CPU使用率监控

    根据 docker 的文档 我们可以通过以下方式获取 docker 容器的 CPU 使用率码头工人统计命令 CPU 列将给出容器正在使用的主机 CPU 的百分比 假设我限制容器使用 50 的主机单个 CPU 我可以通过 cpus 0 5 选
  • 在没有条件的情况下,如何使查询不返回任何内容?

    相当简单 我有一对多 多对一关系 我想查询它 但是 当未提供任何 WHERE 子句信息时 我不希望返回任何结果 简单来说 如何使查询变得非贪婪 您可以添加一个始终为 false 的 where 子句 并附加您想要用 OR 提供的条件 sel
  • 多个结构体,需要在方法中访问相同的字段

    我目前尝试用 C 语言编写一些简单的控制台游戏来娱乐 为此 我需要能够在 嗯 C 中打印类似窗口的结构 我想使用通用渲染方法 让我们称之为frame render 渲染所有不同的 ui 元素 现在的问题是 如何解决这个问题 给定场景 The
  • 计算 IEnumerable 的计数(非泛型)

    谁能帮我一个Count扩展方法为IEnumerable 非通用接口 我知道LINQ不支持它 但是如何手动编写呢 yourEnumerable Cast Count 关于性能的评论 我认为这是过早优化的一个很好的例子 但你可以看一下 stat
  • 使用 Ctrl+v 或右键单击 -> 粘贴检测粘贴的文本

    使用 JavaScript 如何检测用户将哪些文本粘贴到文本区域 您可以使用粘贴事件来检测大多数浏览器中的粘贴 尤其是 Firefox 2 当您处理粘贴事件时 记录当前选择 然后设置一个简短的计时器 在粘贴完成后调用一个函数 然后 该函数可
  • 为什么 SFINAE (enable_if) 在类定义内部起作用,但在外部不起作用

    过去几个小时我一直在努力解决这个非常奇怪的问题 在解决了 SFINAE 的 5 6 个其他问题之后 因为我是新手 基本上在下面的代码中我想要f 适用于所有可能的模板实例化 但有g 仅当N 2 include
  • 我应该如何创建模型类来调用API(使用MVC模式)?

    目前我正在调用一个APIviewcontroller但这本身并不是 MVC 的良好编程实践 这是我的代码 void fetchData NSMutableURLRequest request NSMutableURLRequest allo
  • 如何在 jquery 上并排区分 mouseout/leave 事件?

    有没有办法知道鼠标事件是否已从元素的特定一侧离开 我的意思是 我有一个带有 mouseover mouseenter 事件的 DIV 并且我只想在鼠标离开到元素的左侧时触发该操作DIV 并向右 但如果它从底部或顶部离开 则不应触发任何操作
  • 如何按布尔值对数组进行排序

    我有一个看起来像这样的数组 array array foo gt true array foo gt false array foo gt true array foo gt true array foo gt false 有没有一种简单的
  • 如何在 mongodb + C# 中计数、选择和更新嵌套元素

    我正在创建一个开源社交网络 我不知道是否可以在此处发布 URL 使用 net core 2 1 mongo atlas 使用驱动程序 v2 9 2 我正在从 MS SQL 我知道如何对其进行操作 迁移到 mongo 我仍在学习 我有两个实体
  • IE 11 使用 HTML input=file 标签时锁定文件

    我在 IE11 中使用文件输入中的浏览来选择文件 我在资源管理器中使用shift delete删除了该文件 然后 当我刷新文件夹时 我删除的文件会再次出现在资源管理器中 无论如何 我可以通过客户端 JavaScript 释放文件句柄吗 我在
  • 在 Haskell/Yampa 和 HOOD 中调试游戏对象的输出

    我一直坚持使用 Haskell Yampa Arrows with HOOD 为我的游戏对象生成调试输出 我的引擎基本上运行一系列游戏对象 这些对象产生输出状态 线 圆 然后进行渲染 data Output Circle Position2
  • 动态添加导航抽屉中的项目

    我创建了抽屉 但是我想动态设置抽屉的项目列表 意味着从数据库获取数据并设置为抽屉列表 是否可以 是的 比如何 我也知道静态抽屉 尝试这个 final Menu menu navigationView getMenu for int i 1
  • .Net HashSet唯一性计算完全基于哈希码吗?

    我想知道 Net 是否HashSet
  • xmlstarlet:通过位置号选择元素

    我有这个 XML 文件
  • 如何在
    CSS 中正确定位箭头

    我想更改详细信息中出现的箭头的位置 我尝试过 float left 但如果线条太大 如上面示例中的线条 则当我调整窗口大小时 箭头将移动到下方线条的开头 我希望它保留在第一行的第一个字母之外 我怎样才能做到这一点 Example