Ändern Sie die CSS eines Pseudo-Element mit JQuery

Question

einige Methoden Laut ich sah, habe ich versucht, dies zu verwalten die Position eines Pseudoelement links:

$("a").click(function() { 
 
    var percent = $("input").val(); //Maths returning an value to set 
 
    $(".formEvent").addClass("trig"); 
 
    console.log(percent); 
 
    $("[formEventPointer]").css({ /* CALLING THE PSEUDO ELEMENT*/ 
 
    left: percent + " %" 
 
    }); 
 
});

.formEvent { 
 
    top: 50px; 
 
    /* For the example */ 
 
    padding: 10px; 
 
    height: 80px; 
 
    background: #272727; 
 
    position: relative; 
 
    transition: 300ms; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
    margin-bottom: 0; 
 
} 
 
.formEvent.trig:before { 
 
    content: attr(formEventPointer); /* TAKE A SPECIAL LOOK RIGHT THERE */ 
 
    position: absolute; 
 
    left: 5%; 
 
    top: -15px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 15px solid #272727; 
 
} 
 
a { 
 
    background-color: #1162A7; 
 
    color: white; 
 
    border: 1px solid grey; 
 
    box-shadow: 5px 5px 5px black; 
 
    cursor: pointer; 
 
    padding: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class='formEvent'> 
 
    Change the position : 
 
    <input type="range" value="5" max="100" min="0" step="14.285"> 
 
    <a>Update</a> 
 
</form>

Leider i, Ich bin nicht in der Lage, richtig zu verwalten, wie ich die Position des: vor Pseudo-Elements mit dem Attribut im Inhalt festlegen möchte. Was habe ich vergessen oder wie kann ich das beheben?

EDIT:

Es ist anders, weil ich versuche, was die Frage eine Aufgabe auszuführen, die zu verwenden, ich bitte nicht für das, was ich bereits einen Teil einer Aufgabe zu erfüllen verwenden, um ...

Answer 1

Ich schätze, du machst es ein bisschen falsch.

Sie versuchen, Element zu bekommen Attribut, sondern sollten Sie versuchen, CSS auf der Grundlage von Attribut

In HTML anwenden:

<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'; 
}