Auswählen und Bearbeiten von CSS-Pseudoelementen wie :: vor und :: nach Verwendung von jQuery

Gibt es eine Möglichkeit, CSS-Pseudoelemente wie ::beforeund ::after(und die alte Version mit einem Semikolon) mit jQuery auszuwählen / zu bearbeiten?

In meinem Stylesheet gilt beispielsweise die folgende Regel:

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

Wie kann ich mit jQuery 'foo' in 'bar' ändern?

Sie können den Inhalt auch mit einem Datenattribut an das Pseudoelement übergeben und dann mit jQuery Folgendes bearbeiten:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

Wenn Sie verhindern möchten, dass der 'andere Text' angezeigt wird, können Sie dies mit der folgenden Lösung von seucolega kombinieren:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Sie würden denken, dies wäre eine einfach zu beantwortende Frage, mit allem anderen, was jQuery tun kann. Leider ist das Problem auf ein technisches Problem zurückzuführen: css: after und: before-Regeln sind nicht Teil des DOM und können daher nicht mit den DOM-Methoden von jQuery geändert werden.

Es gibt Möglichkeiten, diese Elemente mithilfe von JavaScript- und / oder CSS-Problemumgehungen zu bearbeiten. Welches Sie verwenden, hängt von Ihren genauen Anforderungen ab.

Ich werde mit dem beginnen, was allgemein als der "beste" Ansatz angesehen wird:

1) Hinzufügen / Entfernen einer vorgegebenen Klasse

Bei diesem Ansatz haben Sie bereits eine Klasse in Ihrem CSS mit einem anderen erstellt :afteroder :beforeStil. Platzieren Sie diese "neue" Klasse später in Ihrem Stylesheet, um sicherzustellen, dass sie überschreibt:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

Dann können Sie diese Klasse einfach mit jQuery (oder Vanilla JavaScript) hinzufügen oder entfernen:

$('p').on('click', function() {
    $(this).toggleClass('special');
});

    $('p').on('click', function() {
      $(this).toggleClass('special');
    });

p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
p.special:before {
  content: "bar";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• Vorteile: Einfache Implementierung mit jQuery; ändert schnell mehrere Stile gleichzeitig; Erzwingt die Trennung von Bedenken (Isolieren von CSS und JS von HTML)
• Nachteile: CSS muss vorab geschrieben sein, damit der Inhalt von :beforeoder :afternicht vollständig dynamisch ist

2) Fügen Sie neue Stile direkt zum Stylesheet des Dokuments hinzu

Es ist möglich, JavaScript zu verwenden, um Stile direkt zum Dokument-Stylesheet hinzuzufügen, einschließlich :afterund :beforeStile. jQuery bietet keine praktische Verknüpfung, aber zum Glück ist das JS nicht so kompliziert:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');

p:before {
  content: "foo";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

.addRule()und die damit verbundenen .insertRule()Methoden werden heute ziemlich gut unterstützt.

Als Variation können Sie auch jQuery verwenden, um dem Dokument ein völlig neues Stylesheet hinzuzufügen, aber der erforderliche Code ist nicht sauberer:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');

p:before {
  content: "foo";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

Wenn es darum geht, die Werte zu "manipulieren" und nicht nur zu ergänzen, können wir auch die vorhandenen oder Stile mit einem anderen Ansatz lesen:after:before :

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');

p:before {
    content:"foo";
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

Wir können ersetzen document.querySelector('p')mit $('p')[0]bei der Verwendung von jQuery, für etwas kürzer Code.

• Vorteile: Jede Zeichenfolge kann dynamisch in den Stil eingefügt werden
• Nachteile: Originalstile werden nicht geändert, sondern nur überschrieben. Wiederholte (ab) Verwendung kann das DOM beliebig groß werden lassen

3) Ändern Sie ein anderes DOM-Attribut

Sie können auch verwenden attr()in Ihrem CSS ein bestimmtes DOM - Attribut zu lesen. ( Wenn ein Browser dies unterstützt :before, unterstützt er dies attr()auch. ) Durch die Kombination mit content:einem sorgfältig vorbereiteten CSS können wir den Inhalt (aber nicht andere Eigenschaften wie Rand oder Farbe) von :beforeund :afterdynamisch ändern :

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Dies kann mit der zweiten Technik kombiniert werden, wenn das CSS nicht im Voraus vorbereitet werden kann:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() {
  $(this).attr('data-before', str);
});

p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• Vorteile: Erstellt keine endlosen zusätzlichen Stile
• Nachteile: attr In CSS kann nur auf Inhaltszeichenfolgen angewendet werden, nicht auf URLs oder RGB-Farben

Obwohl sie von Browsern über CSS gerendert werden, als wären sie wie andere echte DOM-Elemente, sind Pseudoelemente selbst nicht Teil des DOM, da Pseudoelemente, wie der Name schon sagt, keine echten Elemente sind und Sie dies daher nicht können auswählen und bearbeiten sie direkt mit jQuery (oder beliebigen JavaScript - APIs für diese Angelegenheit, nicht einmal die Selectors API ). Dies gilt für alle Pseudoelemente, deren Stile Sie mit einem Skript ändern möchten, und nicht nur für ::beforeund ::after.

Sie können nur zur Laufzeit direkt über das CSSOM (think window.getComputedStyle()) auf Pseudoelementstile zugreifen , das von jQuery beyond nicht verfügbar gemacht wird. Diese .css()Methode unterstützt auch keine Pseudoelemente .

Sie können jedoch immer andere Wege finden, zum Beispiel:

• Anwenden der Stile auf die Pseudoelemente einer oder mehrerer beliebiger Klassen und anschließendes Umschalten zwischen Klassen (siehe die Antwort von seucolega für ein kurzes Beispiel) - dies ist die idiomatische Methode, da einfache Selektoren verwendet werden (die Pseudoelemente nicht sind) Unterscheiden Sie zwischen Elementen und Elementzuständen, wie sie verwendet werden sollen

• Manipulieren der Stile, die auf die Pseudoelemente angewendet werden, durch Ändern des Dokumentstylesheets, was viel mehr ein Hack ist

Sie können Pseudoelemente in jQuery nicht auswählen, da sie nicht Teil von DOM sind. Sie können dem Vaterelement jedoch eine bestimmte Klasse hinzufügen und seine Pseudoelemente in CSS steuern.

BEISPIEL

In jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

In CSS:

span.change:after { content: 'bar' }

Wir können uns auch auf benutzerdefinierte Eigenschaften (auch als CSS-Variablen bezeichnet) verlassen, um Pseudoelemente zu manipulieren. Wir können in der Spezifikation lesen, dass:

Benutzerdefinierte Eigenschaften sind gewöhnliche Eigenschaften, so dass sie auf ein beliebiges Element deklariert werden, sind mit den aufgelösten normalen Vererbung und Kaskade Regeln können mit @media und anderen bedingten Regeln abhängig gemacht werden, können verwendet werden in HTML - Stil - Attribut , kann lesen oder Set mit dem CSSOM usw.

In Anbetracht dessen besteht die Idee darin, die benutzerdefinierte Eigenschaft innerhalb des Elements zu definieren, und das Pseudoelement erbt sie einfach. somit können wir es leicht modifizieren.

1) Inline-Stil verwenden :

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

<div class="box"></div>
<div class="box" style="--color:blue;--content:'I am a blue element'"></div>
<div class="box" style="--color:black"></div>
<div class="box" style="--color:#f0f;--content:'another element'"></div>

2) Verwenden von CSS und Klassen

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

.blue {
  --color:blue;
  --content:'I am a blue element';
}
.black {
  --color:black;
}

<div class="box"></div>
<div class="box black" ></div>
<div class="box blue"></div>

3) Verwenden von Javascript

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");
document.querySelectorAll('.box')[1].style.setProperty("--content", "'I am another element'");

.box:before {
  content:var(--content,"I am a before element");
  color:var(--color, red);
  font-size:25px;
}

<div class="box"></div>
<div class="box"></div>

4) Verwenden von jQuery

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
   with older version we can use style attribute to set the value. Simply pay
   attention if you already have inline style defined! 
*/
$('.box').eq(1).attr("style","--color:#f0f");

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Es kann auch mit komplexen Werten verwendet werden:

.box {
  --c:"content";
  --b:linear-gradient(red,blue);
  --s:20px;
  --p:0 15px;
}

.box:before {
  content: var(--c);
  background:var(--b);
  color:#fff;
  font-size: calc(2 * var(--s) + 5px);
  padding:var(--p);
}

<div class="box"></div>

Möglicherweise stellen Sie fest, dass ich die Syntax var(--c,value)in Betracht ziehe, bei der valuees sich um den Standardwert handelt und der auch als Fallback-Wert bezeichnet wird.

Aus derselben Spezifikation können wir lesen:

Der Wert einer benutzerdefinierten Eigenschaft kann mit der Funktion var () durch den Wert einer anderen Eigenschaft ersetzt werden. Die Syntax von var () lautet:

var() = var( <custom-property-name> [, <declaration-value> ]? )

Das erste Argument für die Funktion ist der Name der zu ersetzenden benutzerdefinierten Eigenschaft. Das zweite Argument für die Funktion ist, falls angegeben, ein Fallback-Wert, der als Substitutionswert verwendet wird, wenn die benutzerdefinierte Eigenschaft, auf die verwiesen wird, ungültig ist.

Und später:

So ersetzen Sie ein var () im Wert einer Eigenschaft:

1. Wenn die benutzerdefinierte Eigenschaft, die durch das erste Argument für die var()Funktion benannt wurde, animationsbeschädigt ist und die var()Funktion in der Animationseigenschaft oder einer ihrer Langhand verwendet wird, behandeln Sie die benutzerdefinierte Eigenschaft so, dass sie ihren Anfangswert für den Rest dieses Algorithmus hat.
2. Wenn der Wert der benutzerdefinierten Eigenschaft, die durch das erste Argument für die var()Funktion benannt wurde, nicht der Anfangswert ist, ersetzen Sie die var()Funktion durch den Wert der entsprechenden benutzerdefinierten Eigenschaft.
3. Andernfalls var()ersetzen Sie die var()Funktion durch den Fallback-Wert , wenn die Funktion als zweites Argument einen Fallback-Wert hat. Wenn var()der Fallback Referenzen enthält, ersetzen Sie diese ebenfalls.
4. Andernfalls ist die Eigenschaft, die die var()Funktion enthält, zum Zeitpunkt des berechneten Werts ungültig.

Wenn wir die benutzerdefinierte Eigenschaft nicht setzen ODER sie auf initialODER setzen, enthält sie einen ungültigen Wert, wird der Fallback-Wert verwendet. Die Verwendung von initialkann hilfreich sein, wenn wir eine benutzerdefinierte Eigenschaft auf ihren Standardwert zurücksetzen möchten.

verbunden

Wie speichere ich einen geerbten Wert in einer benutzerdefinierten CSS-Eigenschaft (auch bekannt als CSS-Variablen)?

Benutzerdefinierte CSS-Eigenschaften (Variablen) für das Box-Modell

^{Bitte beachten Sie, dass CSS-Variablen möglicherweise nicht in allen Browsern verfügbar sind, die Sie für relevant halten (z. B. IE 11): https://caniuse.com/#feat=css-variables}

In Anlehnung an das, was Christian vorschlägt, könnten Sie auch Folgendes tun:

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

Hier ist die Möglichkeit, auf folgende Eigenschaften zuzugreifen: after und: before style, definiert in css:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

Wenn Sie die sudo-Elemente :: before oder :: after vollständig über CSS bearbeiten möchten, können Sie dies JS tun. Siehe unten;

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

Beachten Sie, wie das <style>Element eine ID hat, mit der Sie es entfernen und erneut anhängen können, wenn sich Ihr Stil dynamisch ändert.

Auf diese Weise wird Ihr Element mithilfe von JS genau so gestaltet, wie Sie es über CSS möchten.

Eine funktionierende, aber nicht sehr effiziente Möglichkeit besteht darin, dem Dokument eine Regel mit dem neuen Inhalt hinzuzufügen und mit einer Klasse darauf zu verweisen. Je nachdem, was benötigt wird, benötigt die Klasse möglicherweise eine eindeutige ID für jeden Wert im Inhalt.

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

Hier ist der HTML:

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

Berechneter Stil auf 'vorher' war content: "VERIFY TO WATCH";

Hier sind meine beiden Zeilen von jQuery, die die Idee verwenden, eine zusätzliche Klasse hinzuzufügen, um speziell auf dieses Element zu verweisen, und dann ein Style-Tag (mit einem! Wichtigen Tag) anzuhängen, um das CSS des Inhaltswerts des sudo-Elements zu ändern:

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

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

Danke euch allen! Ich habe es geschafft zu tun, was ich wollte: D http://jsfiddle.net/Tfc9j/42/ hier werfen Sie einen Blick

ich wollte die opazität eines äußeren div haben, um sich von der opazität des inneren div zu unterscheiden und diese änderung mit einem klick irgendwo zu ändern;) danke!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}


<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   


</div>

Sie können eine gefälschte Eigenschaft erstellen oder eine vorhandene verwenden und diese im Stylesheet des Pseudoelements erben .

var switched = false;

// Enable color switching
setInterval(function () {
    var color = switched ? 'red' : 'darkred';
    var element = document.getElementById('arrow');
    element.style.backgroundColor = color;
    
    // Managing pseudo-element's css
    // using inheritance.
    element.style.borderLeftColor = color;
    
    switched = !switched;
}, 1000);

.arrow {
    /* SET FICTIONAL PROPERTY */
    border-left-color:red;
    
    background-color:red;
    width:1em;
    height:1em;
    display:inline-block;
    position:relative;
}
.arrow:after {
    border-top:1em solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
    border-left:1em solid transparent;
    
    /* INHERIT PROPERTY */
    border-left-color:inherit;
    
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
    top:-50%;
}

<span id="arrow" class="arrow"></span>

Es scheint, dass es für die Eigenschaft "content" nicht funktioniert :(

Dies ist nicht praktisch, da ich dies nicht für den realen Gebrauch geschrieben habe, nur um Ihnen ein Beispiel dafür zu geben, 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>"); 
}
}
}

Dies fügt derzeit ein / oder ein Style-Element hinzu, das Ihre erforderlichen Attribute enthält, die sich auf das After-Pseudo-Element des Zielelements auswirken.

Dies kann als verwendet werden

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

und

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

Da nach: und vor: Pseudoelementen nicht direkt über DOM zugegriffen werden kann, ist es derzeit nicht möglich, die spezifischen Werte des CSS frei zu bearbeiten.

Mein Weg war nur ein Beispiel und es ist nicht gut zum Üben. Sie können ihn modifizieren, einige Ihrer eigenen Tricks ausprobieren und ihn für den realen Gebrauch korrigieren.

Also experimentiere selbst mit diesem und anderen!

Grüße - Adarsh ​​Hegde.

Ich füge immer meine eigene Utils-Funktion hinzu, die so aussieht.

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

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

oder nutzen Sie die ES6-Funktionen:

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

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

Warum Klassen oder Attribute hinzufügen, wenn Sie nur a stylean head anhängen können?

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

Hier gibt es viele Antworten, aber keine Antwort hilft dabei, das CSS von :beforeoder :afternicht einmal das akzeptierte zu manipulieren .

Hier ist, wie ich es vorschlage. Nehmen wir an, Ihr HTML ist wie folgt:

<div id="something">Test</div>

Und dann setzen Sie sein: vorher in CSS und entwerfen es wie folgt:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Bitte beachten Sie, dass ich das contentAttribut auch im Element selbst festgelegt habe, damit Sie es später problemlos entfernen können. Jetzt gibt es einebutton Klicken, auf das Sie die Farbe von: before in green und die Schriftgröße in 30px ändern möchten. Sie können dies wie folgt erreichen:

Definieren Sie ein CSS mit Ihrem gewünschten Stil für eine Klasse .activeS:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Jetzt können Sie: before style ändern, indem Sie die Klasse wie folgt zu Ihrem: before-Element hinzufügen:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

Wenn Sie nur Inhalte erhalten möchten :before, können Sie dies wie folgt tun:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

Wenn Sie den :beforeInhalt von jQuery dynamisch ändern möchten , können Sie dies wie folgt erreichen:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

Wenn Sie oben auf die Schaltfläche "changeBefore" klicken, wird der :beforeInhalt von #somethingin "22 " geändert , was ein dynamischer Wert ist.

Ich hoffe, es hilft

Ich habe in definierten Variablen verwenden , :rootinnerhalb CSSdem ändern :after(das gleiche gilt für :before) pseudo-Element , insbesondere die sie ändert background-colorWert für einen gestylt anchordurch definierte .sliding-middle-out:hover:afterund den contentWert für die andere anchor( #reference) in der folgenden Demo , die JavaScript durch Verwendung von Zufall Farben erzeugt / 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("");
 }
);

Ich habe ein jQuery-Plugin erstellt, um CSS-Pseudoregeln hinzuzufügen, wie sie .css()für bestimmte Elemente verwendet werden.

• Plugin Code und Testfall ist hier
• Anwendungsfall als einfaches CSS-Bild-Popup hier

Verwendungszweck:

$('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!"'
  });

Sie können mein Plugin für diesen Zweck verwenden.

JQuery:

(function() {
  $.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      for (var element of parameters.elements.get()) {
        if (!element.pseudoElements) element.pseudoElements = {
          styleSheet: null,
          before: {
            index: null,
            properties: null
          },
          after: {
            index: null,
            properties: null
          },
          id: null
        };

        var selector = (function() {
          if (element.pseudoElements.id !== null) {
            if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
            return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
          } else {
            var id = $.pseudoElements.length;
            $.pseudoElements.length++

              element.pseudoElements.id = id;
            element.setAttribute('data-pe--id', id);

            return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
          };
        })();

        if (!element.pseudoElements.styleSheet) {
          if (document.styleSheets[0]) {
            element.pseudoElements.styleSheet = document.styleSheets[0];
          } else {
            var styleSheet = document.createElement('style');

            document.head.appendChild(styleSheet);
            element.pseudoElements.styleSheet = styleSheet.sheet;
          };
        };

        if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
          element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
        };

        if (typeof parameters.argument === 'object') {
          parameters.argument = $.extend({}, parameters.argument);

          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
          };

          var properties = '';

          for (var property in parameters.argument) {
            if (typeof parameters.argument[property] === 'function')
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
            else
              element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
          };

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        } else if (parameters.argument !== undefined && parameters.property !== undefined) {
          if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
            var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;

            element.pseudoElements[parameters.pseudoElement].index = newIndex;
            element.pseudoElements[parameters.pseudoElement].properties = {};
          };

          if (typeof parameters.property === 'function')
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
          else
            element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

          var properties = '';

          for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
            properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
          };

          element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
        };
      };

      return $(parameters.elements);
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var element = $(parameters.elements).get(0);

      var windowStyle = window.getComputedStyle(
        element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (element.pseudoElements) {
        return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  $.fn.cssBefore = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'before',
      argument: argument,
      property: property
    });
  };
  $.fn.cssAfter = function(argument, property) {
    return setPseudoElement({
      elements: this,
      pseudoElement: 'after',
      argument: argument,
      property: property
    });
  };
})();

$(function() {
  $('.element').cssBefore('content', '"New before!"');
});

.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="element"></div>

Die Werte sollten wie in der normalen Funktion von jQuery.css angegeben werden

Darüber hinaus können Sie auch den Wert des Pseudoelementparameters abrufen, wie in der normalen Funktion von jQuery.css:

console.log( $(element).cssBefore(parameter) );

JS:

(function() {
  document.pseudoElements = {
    length: 0
  };

  var setPseudoElement = function(parameters) {
    if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
      if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
        styleSheet: null,
        before: {
          index: null,
          properties: null
        },
        after: {
          index: null,
          properties: null
        },
        id: null
      };

      var selector = (function() {
        if (parameters.element.pseudoElements.id !== null) {
          if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
          return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
        } else {
          var id = document.pseudoElements.length;
          document.pseudoElements.length++

            parameters.element.pseudoElements.id = id;
          parameters.element.setAttribute('data-pe--id', id);

          return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
        };
      })();

      if (!parameters.element.pseudoElements.styleSheet) {
        if (document.styleSheets[0]) {
          parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
        } else {
          var styleSheet = document.createElement('style');

          document.head.appendChild(styleSheet);
          parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
        };
      };

      if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
        parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
      };

      if (typeof parameters.argument === 'object') {
        parameters.argument = (function() {
          var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};

          for (var property in parameters.argument) {
            cloneObject[property] = parameters.argument[property];
          };

          return cloneObject;
        })();

        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
        };

        var properties = '';

        for (var property in parameters.argument) {
          if (typeof parameters.argument[property] === 'function')
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
          else
            parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
        };

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      } else if (parameters.argument !== undefined && parameters.property !== undefined) {
        if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
          var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;

          parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
          parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
        };

        if (typeof parameters.property === 'function')
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
        else
          parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;

        var properties = '';

        for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
          properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
        };

        parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
      };
    } else if (parameters.argument !== undefined && parameters.property === undefined) {
      var windowStyle = window.getComputedStyle(
        parameters.element, '::' + parameters.pseudoElement
      ).getPropertyValue(parameters.argument);

      if (parameters.element.pseudoElements) {
        return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
      } else {
        return windowStyle || null;
      };
    } else {
      console.error('Invalid values!');
      return false;
    };
  };

  Object.defineProperty(Element.prototype, 'styleBefore', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'before',
        argument: argument,
        property: property
      });
    }
  });
  Object.defineProperty(Element.prototype, 'styleAfter', {
    enumerable: false,
    value: function(argument, property) {
      return setPseudoElement({
        element: this,
        pseudoElement: 'after',
        argument: argument,
        property: property
      });
    }
  });
})();

document.querySelector('.element').styleBefore('content', '"New before!"');

.element {
  width: 480px;
  margin: 0 auto;
  border: 2px solid red;
}

.element::before {
  content: 'Old before!';
}

<div class="element"></div>

^{GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/}

Jemand anderes hat das Anhängen an das head-Element mit einem vollständigen Stilelement kommentiert. Das ist nicht schlecht, wenn Sie es nur einmal ausführen, aber wenn Sie es mehr als einmal zurücksetzen müssen, erhalten Sie eine Menge Stilelemente. Um zu verhindern, dass ich ein leeres Stilelement im Kopf durch eine ID erstellt und das innerHTML davon wie folgt ersetzt habe:

<style id="pseudo"></style>

Dann würde das JavaScript so aussehen:

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

In meinem Fall brauchte ich dies, um die Höhe eines Vorher-Elements basierend auf der Höhe eines anderen Elements festzulegen. Die Größe ändert sich beim Ändern der Größe, sodass ich sie setHeight()jedes Mal ausführen kann, wenn die Größe des Fensters geändert wird, und das ersetzt<style> ordnungsgemäß ersetzt wird.

Ich hoffe, das hilft jemandem, der feststeckte und versuchte, dasselbe zu tun.

Ich habe etwas anderes für dich, das einfach und effektiv ist.

    <style> 
    .case-after:after { // set your properties here like eg: 
        color:#3fd309 !important; 
     } 
     .case-before:before { // set your properties here like eg: 
        color:#151715 !important; 
     }
 </style>
  // case for after
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-after');
    });

     // case for before
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-before');
    });