pseudo-element 相关问题

应用“clear: Both;”是否安全到.clearfix::之前？

.clearfix::之前， .clearfix::之后{ 内容： ””; 显示：块； 明确：两者； } 我认为上面的clearfix方法既紧凑又安全。然而，我意识到如果这个方法是这样的话......

如何隐藏/禁用 safari 的 ::marker 伪元素

我有一个问题。我无法隐藏 Safari 的 :: 标记。 #categories-4.widget_categories::marker { 内容：''！重要； } 例如，它适用于 Chrome 或 Microsoft Edge。感谢您的帮助。

CSS @supports (::伪元素)

我想将区域更改为最大溢出：仅在支持 ::-webkit-scrollbar-thumb 时才滚动。 在纯 CSS 中这可能吗？看来 @supportsonly 检查规则，没有选择器。

::first-letter 不算 `@` 并以 2 个字母应用 css

玩耍时::first-letter 当字符串以 @ 开头时，它会为 2 个字母着色。 页脚 { 颜色：中海绿色； 字体大小：2rem； 字体样式：斜体； } 页脚::第一个字母 { 颜色: pu...

::first-letter 不算 `@` 并以 2 个字母应用 cdd

玩耍时::first-letter 当字符串以 @ 开头时，它会为 2 个字母着色。 页脚 { 颜色：中海绿色； 字体大小：2rem； 字体样式：斜体； } 页脚::第一个字母 { 颜色: pu...

如何将首字下沉样式应用于伪元素内容

我的博客中有一个问答页面，我想让问题以一个大问号开头，答案以一个大感叹号，即首字下沉。这样的效果很容易实现

带有 :first-child 和 :first-letter 的令人困惑的伪元素语法

当我遇到一个奇怪的情况时，我正在摆弄 CSS 选择器。 如果我使用 :first-child 伪元素，我需要在它前面添加一个空格才能使其工作，如果我不这样做，它将不起作用。怎么...

CSS bug 在固定位置的背景和文本之间带来了伪元素[重复]

好像我刚刚发现了一个错误什么的。通常，当一个元素有一个伪元素并且我希望它显示在其父元素后面时，我使用 z-index:-1。如果元素具有位置相关性，则效果很好...

CSS 悬停不起作用（由于伪元素）？

我正在摆弄 SVG 和 CSS 效果，以实现类似于游戏“limbo”的外观。 这就是我的标记的样子（https://codepen.io/Richard-Hahn/pen/VwRwwjm）： 我正在摆弄 SVG 和 CSS 效果，以实现类似于游戏“limbo”的外观。 这就是我的标记的样子（https://codepen.io/Richard-Hahn/pen/VwRwwjm）： <div class="tiltshift"> <div class="grain"> <svg>...</svg> </div> </div> .grain{ display:flex; justify-content:center; align-items:center; width:100%; height:auto; background-position:center } .grain:after{ content:""; background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png"); height: 300%; width: 300%; position: fixed; opacity:0.1; animation: animateGrain 8s steps(10) infinite; } @keyframes animateGrain{ 0%, 100% { transform:translate(0, 0) } 10%{ transform:translate(-5%,-10%) } 20%{ transform:translate(-15%,-20%) } 30%{ transform:translate(-5%,-10%) } 40%{ transform:translate(-15%,-20%) } 50%{ transform:translate(-5%,-10%) } 60%{ transform:translate(-15%,-20%) } 70%{ transform:translate(-5%,-10%) } 80%{ transform:translate(-15%,-20%) } 90%{ transform:translate(-5%,-10%) } 100%{ transform:translate(-15%,-20%) } } .tiltshift:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(26px); animation: clip-fade 12s infinite alternate; } .tiltshift { border:1px solid red; } @keyframes clip-fade { 0% { mask-image: linear-gradient(204deg, rgba(0, 0, 0, 1), transparent 100%); } 100% { mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent 100%); } } #rect1 { fill:red !important; } #rect1:hover { transform:scale(1.07) !important; } 颗粒和倾斜效果按预期工作，但我无法再触发 svg-elements 上的悬停行为。我做错了什么？ 使用 Firefox 检查器，当我选择元素时，我可以触发悬停。所以我怀疑是伪元素阻止了 svg-elements 上的悬停。 你的直觉是对的，伪元素正在干扰悬停事件。事实上，由于它们占据了所有的屏幕空间，因此它们是在 rect 元素之前“捕获”悬停事件的对象。 您可以通过向伪元素添加 pointer-events: none 规则来解决此问题。这样，它们就不会再捕获悬停，并且矩形现在可以自由地受到它的影响。 参见 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

当 CSS 伪元素 ::after 不在行尾时删除尾部空格

当我的 ::after 元素添加到行的中间而不是末尾时，会添加尾随空格。我尝试将其删除。 通过将元素放入内联块中，确实可以消除白色水疗...

如何查找元素的首字母并在 ::before 中使用它

我得到了以下 HTML 设置： ：：前 我得到了以下 HTML 设置： <div class="panel"> <div class="panel-heading"> ::before <p class="panel-title"> <a href="#aa1"> <span>Piece rate work</span> </a> </p> </div> </div> 这在我的 CSS 中： .panel-heading:before { content: 'B'; background-color: orange; left: -25px; top: 6px; display: inline-block; position: absolute; height: 45px; width: 47px; color: #fff; z-index: 9999; text-align: center; } 我想做的是找到span元素中内容的第一个字母，在本例中是字母P。并将这个字母获取到.panel-heading::before伪元素的内容。 棘手的部分，对我来说很棘手，是有更多的 .panel div 里面有相同的子元素。其中每个的 span 元素都是不同的。所以它应该总是得到另一个（第一个）字母并将其放在 ::before 内容中。 jQuery 有办法解决这个问题吗？ 这是您使用 jquery 的示例，使用 text() 函数获取 span 标记的文本，然后使用 charAt() 函数获取第一个字符，最后我使用 before() 函数并将结果包装在标签 span.before 中 $(document).ready(function(){ var text = $('span').text(); var first_letter = text.charAt(0) $( ".panel-heading > span.before" ).before( first_letter ) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="panel"> <div class="panel-heading"> <span class="before"></span>::before <p class="panel-title"> <a href="#aa1"> <span>Piece rate work</span> </a> </p> </div> </div>

如何将 CSS 伪元素放置在表格行的左侧

我试图在某些具有特定类的 tr 元素的第一个 td 元素上创建一个伪元素。表本身包含在可滚动容器内。 我想要实现的是...

在 CSS 中获取无效属性有效属性值，内容为：leader('.') target-counter(attr(href), page)？

我有这样的事情： .toc a { 显示：块； } .toc a::after { 宽度：50px； 背景：红色； 内容：leader('.') target-counter(attr(href), page); } p { 最大宽度：100px； }...

::伪元素之前有奇数垂直偏移量

在此页面上，我使用了 Strong::before{} 伪元素来添加您在某些章节文本之前看到的星星图像，如下所示： 在此输入图像描述 不幸的是，正如你所看到的，...

将 box-shadow 添加到 :after 伪元素

我有一个名为 .testimonial-inner 的 div，并使用 :after 伪元素，我有一个位于其下方的向下箭头。我遇到的问题是添加一个盒子阴影，这样他们就会机器人......

：在阻止锚标记之前，更改指针事件将不起作用

我正在尝试制作一个类似“卡片”的悬停元素，您可以单击它，它会重定向您。这是代码： https://jsfiddle.net/gn4kufcy/ 我最初的问题是由于卡

不能定位::在其父级后面的伪元素之前[重复]

我尝试创建一个div，并让它的::before出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 我尝试创建一个 div，并让它的 ::before 出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。 <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="" alt="" class="hero_cont-image__image"> </div> .hero__cont-image { position: relative; transform: rotate(0); display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } 我希望伪元素出现在原始元素后面 在父级上 transform 将创建一个新的堆叠上下文，这使得父级成为堆叠上下文的根元素。即使 z 索引为负，伪元素也无法将自身降低到根元素以下，因此它始终位于父元素之上。 如果您没有使用变换，请将其删除，并且带有负元素的伪元素将显示在父元素下方，因为现在父元素不再是其堆叠上下文的根元素。 .hero__cont-image { position: relative; display: flex; align-items: center; justify-content: center; left: calc(-50vw + 50%); border-radius: 0px 300px 300px 0px; } .hero__cont-image::before { content: ""; background-color: blue; position: absolute; width: 125%; height: 125%; z-index: -1; } <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </head> <body> <div class="hero container split"> <div class="hero__cont-image bg-dark"><img src="https://i.stack.imgur.com/memI0.png"> </div> </div> </body> 注意：这些元素创建新的堆叠上下文：Opacity、transforms、filters、css-regions、paged media。如果需要旋转父元素，请在 div 上创建一个包装器 div 并旋转该包装器。

无法使用 testCafe 找到其中有伪元素 ::before 的锚标记

TestCafe ：我有一个锚标记，其中有一个伪元素 ::before。如何选择仅当我悬停时出现在检查元素中的锚标记内的图像...

如何在 CSS 中创建围绕圆形（日食形状）的圆形渐变边框？

我正在尝试在 CSS 中创建一个带有渐变的圆形边框。我尝试使用带有圆锥渐变的边框图像，但渐变在矩形上显示为圆锥渐变

使用javascript点击伪元素？

我想知道如何启用对 :before 伪元素的点击（我链接到下面的 JSfiddle 上 div 的橙色部分）。我读过，由于伪元素不在 DOM 中，因此您不会...