使用jQuery选择和操作CSS伪元素，例如 before和 after

JavaScript

神奇Sam

2020-03-15

有没有办法使用jQuery 选择/处理CSS伪元素，例如::before和::after（以及带有分号的旧版本）？

例如，我的样式表具有以下规则：

.span::after{ content:'foo' }

如何使用jQuery将'foo'更改为'bar'？

第1634篇《使用jQuery选择和操作CSS伪元素，例如 before和 after》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

猴子十三小胖 2020.03.15

I made use of variables defined in :root inside CSS to modify the :after (the same applies to :before) pseudo-element, in particular to change the background-color value for a styled anchor defined by .sliding-middle-out:hover:after and the content value for another anchor (#reference) in the following demo that generates random colors by using JavaScript/jQuery:

HTML

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
  <a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

CSS

:root {
    --anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: var(--anchorsFg);
    outline: 0;
    font-style: italic;

    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -ms-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background-color: transparent;

    -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background-color: var(--anchorsFg);
    outline: 0;
}
#reference {
  margin-top: 20px;
}
.sliding-middle-out:before {
  content: attr(data-content);
  display: attr(data-display);
}

JS/jQuery

var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
    $( ":root" ).css({"--anchorsFg" : anchorsFg});
});

$( "#reference" ).hover(
 function(){
    $(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
 },
 function(){
    $(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
 }
);

NearGilSam 2020.03.15

尽管它们是通过浏览器通过CSS呈现的，就像它们与其他真实DOM元素一样，但伪元素本身并不属于DOM，因为顾名思义，伪元素不是真实元素，因此您不能直接使用jQuery（或与此相关的任何 JavaScript API，甚至不是Selectors API）来选择和操作它们。这适用于您要通过脚本修改其样式的所有伪元素，而不仅仅是::beforeand ::after。

您只能在运行时通过CSSOM（think window.getComputedStyle()）直接访问伪元素样式，而jQuery以外的CSSOM 不会公开该样式.css()，该方法也不支持伪元素。

但是，您始终可以找到其他解决方法，例如：