pseudo-element 相关问题

CSS伪元素允许在元素内增强内容显示或者为元素生成额外的开始或结束内容的能力。

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

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

css css-selectors pseudo-element

回答 1 投票 0

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

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

html css pseudo-element drop-cap

回答 1 投票 0

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

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

html css css-selectors pseudo-element

回答 2 投票 0

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

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

css pseudo-element

回答 1 投票 0

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 svg hover pseudo-element

回答 1 投票 0

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

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

html css pseudo-element

回答 2 投票 0

如何查找元素的首字母并在 ::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>

jquery pseudo-element

回答 1 投票 0

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

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

html css html-table pseudo-element

回答 1 投票 0

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

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

html css pseudo-element

回答 1 投票 0

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

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

css flexbox pseudo-element

回答 1 投票 0

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

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

html css pseudo-element css-shapes

回答 5 投票 0

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

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

html css pseudo-element

回答 1 投票 0

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

我尝试创建一个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 并旋转该包装器。

css css-selectors pseudo-element

回答 1 投票 0

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

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

javascript tags anchor pseudo-element testcafe

回答 1 投票 0

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

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

css border gradient pseudo-element border-image

回答 1 投票 0

使用javascript点击伪元素？

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