CSS 中的 ::before 和 ::after 伪元素选择器有什么意义?

2023-11-24

我和其他许多人一样使用过 CSS 伪元素选择器,主要只是说我使用过它们。

但我正在绞尽脑汁,努力想出将它们与标记并列的原因。

举个例子:

<p>Hello</p>

p::after {
   content: "*";
}

使用这个比使用有什么好处<span> tags?

我是否错过了重点::before and ::after?是否有一些坚实的理由来使用它们而不是预先存在的语义标记?


CSS2.1规范关于生成的内容是这样说的:

在某些情况下,作者可能希望用户代理呈现并非来自文档树。一个常见的例子是编号列表;作者不想明确列出这些数字,他或她希望用户代理自动生成它们。类似地,作者可能希望用户代理在图的标题之前插入单词“Figure”,或者在第七章标题之前插入“Chapter 7”。特别是对于音频或盲文,用户代理应该能够插入这些字符串。

基本上,目的是尽量减少“内容”对内容结构的污染,否则“内容”更适合作为表示元素,或者更好地自动化。

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

CSS 中的 ::before 和 ::after 伪元素选择器有什么意义? 的相关文章

  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • 页面中的所有 css 类都使用 js

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

    我生成了一个带有 CSS3 样式的渐变颜色条 fiddle http jsfiddle net eDEWk 现在想要该颜色条中特定位置的颜色值 通过 x 和 y 坐标 据我所知 没有直接的方法可以做到这一点 我看到两个选择 在 JavaSc
  • CSS - 设计类样式的不同方法

    阅读下面的 CSS 代码我想知道 a 和 b 之间有什么区别 第一个声明是一种好的样式方式吗 a round box icon b round box icon 使用 A 您选择具有 2 个类的所有元素 同时 使用 B 您选择所有具有类 r
  • 让浏览器缓存我的动态 PHP 样式表

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

    我做了一些搜索并尝试了一些不同的东西 但就我的一生而言 我似乎无法专门针对三星 Galaxy S5 我只是在网站上工作时尝试一些东西 但我尝试的任何东西似乎都没有针对特定设备 这是我到目前为止所尝试过的 media only screen
  • 背景大小:封面在 Google Chrome 中突然停止工作?

    还有其他人有这个问题吗 我以创建网站为生 有些网站使用了 css 属性background size cover 大约 1 周前突然间 所有具有此属性的网站都不再在 Google Chrome 中正确显示 所有其他浏览器都工作正常 还有其他
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 如何在CSS网格系统中偏移div列

    有谁知道抵消前两个div位于侧行且具有类的 scol 3 12偏移量为offset 6 12 and offset 9 12位于我的网格系统的右侧jsFiddle http jsfiddle net c6R6t CSS body font
  • 如何将背景颜色(或自定义 css 类)应用于网格中的列 - ExtJs 4?

    看起来应该很简单 但我根本无法完成此任务 我什至不需要动态完成它 例如 假设我有一个简单的 2 列网格设置 如下所示 columns header USER dataIndex firstName width 70 cls red head
  • 如何在GEB中选择内部元素的文本?

    我有以下场景 div ul class select2 results style width 400px li class select2 results dept 0 select2 result select2 result sele
  • 在 Safari for Lion (OS X 10.7) 中设置滚动条颜色

    Lion 中的新滚动条似乎会根据 body 元素的背景颜色调整 Safari 中的颜色 有没有办法手动设置滚动条是深色还是浅色 我知道有 webkit CSS 选项来设置滚动条的样式 这实际上早于新的 Lion 滚动条 我使用该方法的唯一问
  • Sass 部分导入

    我有 sass 编译的问题 当我有一个部分的项目时 partial scss并将其导入到多个部分文件中 因为它包含颜色变量 它将多次出现在编译的 css 中 这很丑陋 因为同一个规则会多次 推翻 自身 这使得调试信息 chromium 开发
  • SVG - 可以在一侧添加笔画破折号渐变或透明形式

    我创建了一个 SVG 动画 在其中允许中风虚线阵列移动 我是否可以在中风破折号数组的尾部添加渐变并保持一侧透明 如示例中所示 svg main width 700px margin 30px auto position relative s
  • 移动时如何将图像保留在另一图像后面?

    Edit Here https jsfiddle net 33cL1qos 6 我可以在选择时将其保留在后面 但由于某种原因它现在不可拖动 我可能做错了什么 我能够从计算机上传图像 然后移动图像 我的问题 当我选择图像时 它会向前弹出 直到
  • Bootstrap 4、导航栏固定顶部和其他粘顶元素

    这里是再现 https jsbin com lawafu edit html 输出 https jsbin com lawafu edit html output 这是一个错误吗 一个失误 一个问题 一个无法实现的想法 Before scr
  • Bootstrap 切换导航项在单击后保持打开状态

    我有简单的 Bootstrap 3 切换导航 ul class nav navmenu nav clearfix li class navmenu brand dropdown clearfix a href class dropdown
  • 修复了 div 背景重叠浏览器滚动条的问题

    我以前从未见过的非常奇怪的行为 我有一个固定位置的 div 它有一个透明的 png 背景图像 z index 设置为 1 以便内容可以使用滚动条在固定图像上滚动 我将其放置在底部和右侧 0px 处 但图像与滚动条重叠 无论如何 在 FF 和
  • 通过使用 Jquery 添加类来触发 CSS3 转换

    目前我有一个正在运行的小提琴 当我向它添加一个类时 我试图让 css3 不透明过渡触发 基本设置是我单击一个按钮 然后通过 jquery 添加一个 div 到 dom 然后将该元素添加到 dom 然后向其中添加一个类 向该新 dom 元素添
  • 如何将内容放在article.js之上/之上

    So I am trying to create a navigation and footer in the body of the website but the particle js keeps coming over those

随机推荐