は、私が見たいくつかの方法によるとjQueryの

Question

を使用して擬似要素のCSSを変更し、私はにこれをしようとした管理の擬似要素の左位置：残念ながら

$("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>

、I適切に管理することができません：コンテンツ内に属性セットが設定された：before疑似要素の位置が必要です。私は何を忘れましたか、またはこれをどのように修正できますか？

編集：私は質問がタスクを実行するために言った、私はすでにタスクの一部を達成するために使用するものを求めていないよ使用しようとするので、

それは違う...

Answer 1

私はあなたが間違ったやり方でそれをやっていると思います。

あなたはむしろあなたがHTMLでは属性

に基づいてCSSを適用しようとする必要があり、属性を使用して要素を取得しようとしている：jQueryので

<span>foo</span> 

：で

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

CSS：

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