使用 JQuery 修改伪元素的 css

Question

根据我看到的一些方法，我试过这个管理伪元素左侧的位置 :

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

不幸的是，我无法正确管理 :before 伪元素的位置，并在内容中设置了属性。我忘记了什么，或者我该如何解决这个问题？

编辑：

这是不同的，因为我尝试使用问题所说的内容来执行任务，而不是要求我已经使用的内容来完成任务的一部分...

Answer 1

我猜你做的有点不对。

您正在尝试使用属性获取元素，而您应该尝试在属性

的基础上应用 CSS

在HTML中：

<span>foo</span>

在jQuery中：

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

在CSS中：

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

使用 JQuery 修改伪元素的 css

Modify the css of a pseudo element using JQuery

javascript

css

jquery

pseudo-element

编辑：