Die Auswahl und Manipulation von CSS-pseudo-Elemente wie ::before und ::after mit Hilfe von jQuery

Obwohl Sie gerendert werden, die von den Browsern über CSS, als wären Sie wie andere echte DOM-Elemente pseudo-Elemente selbst sind nicht Teil des DOM, da die pseudo-Elemente, wie der name schon sagt, sind nicht wirklich Elemente, und daher können Sie nicht wählen Sie und Bearbeiten Sie direkt mit jQuery (oder alle JavaScript-APIs für diese Angelegenheit, auch nicht die Selectors API). Dies gilt für alle pseudo-Elemente, deren Stile, die Sie versuchen zu ändern, mit einem Skript, und nicht nur ::before und ::after.

Können Sie nur auf pseudo-element-Stile zur Laufzeit direkt über die CSSOM (denke window.getComputedStyle()), ist nicht ausgesetzt, indem Sie jQuery über .css() eine Methode, die keine Unterstützung für pseudo-Elemente.

Können Sie immer andere Wege finden, um es, wenn, zum Beispiel:

• Anwendung der Stile der pseudo-Elemente an eine oder mehrere beliebige Klassen, dann der Wechsel zwischen den Klassen (siehe seucolega Antwort für ein schnelles Beispiel) — das ist die idiomatische Weise, wie man es macht Gebrauch von einfachen Selektoren (die pseudo-Elemente sind nicht), zu unterscheiden zwischen Elementen und element-Staaten, so wie Sie verwendet werden sollen,

• Manipulieren der Stile angewendet werden, sagte pseudo-Elemente, durch ändern der Dokument-stylesheet, das ist viel mehr ein hack

InformationsquelleAutor BoltClock

In der Linie von dem, was Christian schon sagt, Sie könnte auch tun:

$('head').append("<style>.span::after{ content:'bar' }</style>");

InformationsquelleAutor Ivan Chaer

WENN Sie wollen, zu manipulieren, das ::before oder ::after sudo Elemente vollständig über CSS könnte man es machen, JS. Siehe unten;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */</style>');

Beachten Sie, wie die <style> element hat eine ID, die Sie verwenden können, um es zu entfernen und fügen Sie es wieder, wenn Ihr Stil ändert sich dynamisch.

Diese Weise, Ihr element ist der Stil genau, wie Sie es über CSS, mit Hilfe von JS.

InformationsquelleAutor

Hier ist der HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

Berechneten Stil auf "vorher" war content: "VERIFY TO WATCH";

Hier ist meine zwei Zeilen jQuery, die die Idee, das hinzufügen einer extra Klasse, die speziell Referenz auf dieses element und dann Anhängen ein style-tag (mit ein !wichtig tag) zu änderungen der CSS des sudo-element den content-Wert:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");

InformationsquelleAutor Coyote

Dies ist nicht praktisch, da ich nicht schreiben diese für die Reale Welt verwendet, nur um Ihnen ein Beispiel dafür, was erreicht werden kann.

css = {
before: function(elem,attr){ 

if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
} else {
 $("#cust_style").remove();
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
}

}, after: function(elem,attr){
if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 

} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 
}
}
}

diese derzeit fügen Sie ein /oder fügt ein Style-element mit dem Attribut notwendig ist, die Auswirkungen auf das target-element ist nach dem Pseudo-element.

dies kann verwendet werden, als

css.after("someElement"," content: 'Test'; position: 'absolute'; ") //editing /adding styles to :after

und

css.before( ... ); //to affect the before pseudo element.

als nach dem: und vor: pseudo-Elemente sind nicht direkt zugänglich durch den DOM ist es derzeit nicht möglich, Bearbeiten Sie die Spezifischen Werte der css-frei.

mein Weg war nur ein Beispiel und es ist nicht gut für die Praxis, Sie können es ändern, versuchen Sie, einige eigene tricks und machen es richtig für Reale Welt Verwendung.

also machen Sie Ihre eigenen Experimente mit diesem und anderen!

viele Grüße - Adarsh Hegde.

InformationsquelleAutor Adarsh Hegde

Bin ich immer zusätzlich meine eigenen utils-Funktion, die wie folgt aussieht.

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

oder nutzen ES6-Features:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

InformationsquelleAutor Orlandster

Habe ich eine jQuery-plugin zum hinzufügen von css-pseudo-Regeln, wie mit .css() für bestimmte Elemente.

• plugin-code und test-case hier
• Anwendungsfall als einfache css-image-popup hier

Verwendung:

$('body')
  .css({
    backgroundColor: 'white'
  })
  .cssPseudo('after', {
    content: 'attr(title) ", you should try to hover the picture, then click it."',
    position: 'absolute',
    top: 20, left: 20  
  })
  .cssPseudo('hover:after', {
    content: '"Now hover the picture, then click it!"'
  });

InformationsquelleAutor BananaAcid

Machte ich Gebrauch von Variablen definiert, die in :root innen CSS zum ändern der :after (das gleiche gilt für :before) pseudo-element, insbesondere zum ändern der background-color Wert für einen Stil anchor definiert durch .sliding-middle-out:hover:after und die content Wert für eine anchor (#reference) in den folgenden demo, die generiert zufällige Farben durch die Verwendung von 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("");
 }
);

InformationsquelleAutor Riccardo Volpe