Tag: 伪元素

::在伪元素堆栈顺序问题之前: 静态定位时，:: before伪元素堆栈（z-index）在子元素的内容之前，但是在子元素的后面。任何人都可以解释为什么，甚至是如何发生这种情况，或者如果这是所有主stream浏览器的问题？ <style> div { background-color:yellow; width:400px; } div::before { background-color:red; content:"div::before"; } div::after { background-color:green; content:"div::after"; } div p { background-color:blue; color:white; margin:-15px 0; padding:0; } </style> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p> </div> http://jsfiddle.net/funkyscript/ALrgf/

哪些元素支持:: before和:: after伪元素？: 我试图为HTML5中的<input>提供一些良好的默认样式，并尝试以下方法： input::after { display: inline; } input:valid::after { content: ' ✓ '; color: #ddf0dd; } input:invalid::after { content: ' ✗ '; color: #f0dddd; } 唉， ::after内容永远不会显示出来。伪元素的双冒号和单冒号不是问题; 我已经尝试了两个。有一个伪元素和一个伪类也不是问题; 我试过没有:valid和:invalid 。我在Chrome，Safari和Firefox中得到了相同的行为（Firefox没有:valid :invalid伪类，但我没有这样做。伪元素在<div> ， <span> ， <p>和<q>元素上工作正常 – 其中一些是块元素，一些是内联的。所以，我的问题是：为什么浏览器认为<input>没有::after ？我无法在规范中find任何可以表明这一点的内容。

使用CSS：之前和之后：内嵌CSS的伪元素？: 我正在使用内联CSS（即style属性中的CSS）制作HTML电子邮件签名，我很好奇是否可以使用:before和:after伪元素。如果是这样，我将如何实现这样的内联CSS？ td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

“文字修饰”和“后”伪元素，重新审视: 我正在重新问这个问题，因为它的答案在我的情况下是行不通的。在我的印刷媒体样式表中，我想在每个链接之后使用:after伪类追加url。 a:after { content: " <" attr(href) ">"; text-decoration: none; color: #000000; } 在Firefox（也可能是Chrome浏览器，但不是IE8）中， text-decoration: none被忽略，下划线延伸到url的底部。但是， color正确设置为黑色的url。有没有办法使text-decoration工作？原始问题附加了固定大小的图像，而不是可变宽度的文本。它的答案使用填充和背景图像，以避免使用文本修饰属性。当内容是宽度可变的文本时，我仍然在寻找解决scheme。

如何使用jQuery访问伪元素的样式属性？: 就上下文而言，这是前面问题的后续。我不想通过cssRules挖掘，而是希望将逻辑基于search这些规则的效果的jQueryselect器。给定的默认属性 .commentarea .author:before { background-image: url(http://…); background-position: -9999px -9999px; /* … */ } 这是有select性地修改如 .author[href$="gbacon"]:before /* … */ { content: ""; background-position: 0 -140px } 我怎样才能select各自的背景位置有默认值的伪元素？在中复制select器 GM_log("size = " + $(".commentarea .author:before").size()); 什么都不匹配尝试.siblings()与 $(".commentarea .author") .map(function(i) { GM_log($(this) .siblings() .map(function (i) { return $(this).css("background-image") }) .get() .join(", ")) }); 只产生none值。有关详细信息，请参阅实时页面 […]

通过JavaScript更改CSS伪元素样式: 是否有可能通过JavaScript更改CSS伪元素样式？例如，我想dynamic设置滚动条的颜色，如下所示： document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); 我也想能够告诉滚动条隐藏像这样： document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden"; 但是，这两个脚本都会返回： Uncaught TypeError：无法读取null的属性'style' 有没有其他的方式去做这件事？跨浏览器的互操作性并不重要，我只是需要它在webkit浏览器中工作。

加长的六angular形button只使用一个元素: 我想用CSS创build一个像这样的button，而不使用其他元素。 button图像由于button有一个border ，我想我通常都需要:before和:after元素在一边创build一个箭头。所以要在每一边制作一个箭头，我需要链接中的另一个span元素。我试过的第二种方法是你在下面看到的。但是采用这种解决scheme，它们没有正确居中，箭头的每一边的长度都不相同。有人有一个解决scheme？ /* General Button Style */ .button { display: block; position: relative; background: #fff; width: 300px; height: 80px; line-height: 80px; text-align: center; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #e04e5e; margin: 40px auto; font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } /* Button Border Style */ .button.border { border: […]

：之后和：之前CSS的伪元素攻击IE 7: 我使用:after和:before CSS伪元素，它在IE8和所有的现代浏览器，但它在IE7中工作正常工作正常。有没有知道黑客在IE7中解决这个问题？

是否可以设置其父元素下方的伪元素的堆叠顺序？: 我正在尝试用伪元素CSSselect器来devise一个元素 elementTag{position:relative; z-index:1;} elementTag:after{position:relative; z-index:0; content:" "; position:absolute; width:100px; height:100px;} 看起来像:after元素不能低于元素本身。有没有办法让伪元素低于元素本身？