在伪元素内嵌套伪元素

2024-03-07

我有一个 :before 用于开头“引用”,一个 :after 用于结束引用。

现在我想要的是 :after:after 作为“引用”参考,但我无法让它工作。

有谁知道这是否可能?

到目前为止我的代码:-

blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent:60px;
}
blockquote:before {
  font-size: 170px;
  margin-left: -136px;
  margin-top: 50px;
  opacity: 0.2;
  position: absolute;
  overflow:visible;
  float:left;
  width:135px;
}
blockquote:after {
  float: right;
  font-size: 170px;
  margin-right: 35px;
  margin-top: 33px;
  opacity: 0.2;
  overflow:visible;
  width:135px;
}
blockquote[cite]:after:after {
    display: block;
    text-align: right;
    content: "\2014\ " attr(cite);
    font-style: normal;
    font-size: 0.8em;
    }

筑巢的想法::before and ::after伪元素已被提出;看本节 http://www.w3.org/TR/css3-content/#nesting生成和替换内容模块的。然而,该模块已被放弃等待完全重写 http://www.w3.org/Style/CSS/current-work.en.html,所以在这份文件重新发布之前,我不会对它的实施抱有任何期待。即便如此,嵌套内容伪元素是否仍然是一个问题仍然未知。

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

在伪元素内嵌套伪元素 的相关文章

  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • TYPO3 显示子页面的内容,包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • Firefox CSS 大纲错误?

    在 Chrome 和 IE9 上 我指定的 CSS 轮廓完全符合我的要求 并充当我正在设计的元素周围的第二个边框 但在 Firefox 上 轮廓会向外扩展 以便包含我生成的 after 伪元素以及主元素 这是一个错误 还是预期的 有什么好的
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right
  • 绝对定位的表头 (th) - 哪个浏览器是错误的?

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • 左对齐图像和居中文本在 div 内的同一级别?

    HTML br div class UpperTitle img src align left CableSolve Web Dashboard Version 0 1 1 div br CSS UpperTitle text align

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • 文本溢出:省略号显示不同的字符

    我这里遇到了一些 CSS 问题 看这张图片 https www flickr com photos 125543025 N07 saved 1 在此图像中 我为文本 INTENSE TRAINING 添加了 CSS 样式 sample st

随机推荐