Modify the css of a pseudo element using JQuery

Question

According to some methods i saw, i tried this to manage the position left of a pseudo element :

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

Unfortunately, i'm not able to properly manage as i want the position of the :before pseudo element, with the attribut set in the content. What did i forget, or how can i fix this ?

EDIT :

It's different because i try to use what the question said to perform a task, i'm not asking for what i already use to accomplish a part of a task...

Why are you using a pseudo-element instead of a regular element? Then you could directly modify the style. — nils, May 09 '16 at 14:34
Not sure where you've seen that, but giving the element an attribute, and trying to select it with that attribute, ***won't work***! Pseudo elements aren't really part of the DOM, and can't be selected with javascript. — adeneo, May 09 '16 at 14:35
I use pseudo element because it's safe and simpler to prepend / append each element of a class. I've seen that in there http://pankajparashar.com/posts/modify-pseudo-elements-css/ see the method 5 and in another questions in stack overflow — Nicolas Frbezar, May 09 '16 at 14:41

score 0 · Accepted Answer · answered May 09 '16 at 14:41

0

I guess you are doing it in a bit of wrong way.

You are trying to get element using attribute, rather you should try to apply CSS on the basis of attribute

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

answered May 09 '16 at 14:41

Parag Bhayani

3,280
2
28
52

So the attr can be used to replace a value, and not for something else ? If i have to modify a "left" property, how i have to do ? – Nicolas Frbezar May 09 '16 at 14:48
Need to look at your question probably, Currently I am going away from the pc, will help you out tomorrow – Parag Bhayani May 09 '16 at 14:49
Fine, so i will take a look – Nicolas Frbezar May 09 '16 at 14:53
Hi, As per my knowledge and little research I came to know that we can just change the content of the pseudo element runtime only not CSS – Parag Bhayani May 10 '16 at 07:15
There are few workarounds mentioned in these posts, does that help you somehow? http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery http://stackoverflow.com/questions/20091872/modify-css-of-the-after-pseudo-element-using-jquery – Parag Bhayani May 10 '16 at 07:17

Modify the css of a pseudo element using JQuery

EDIT :

1 Answers1