Changing Width Property of a :Before CSS Selector Using Jquery

Changing width property of a :before css selector using JQuery

I don't think there's a jQuery-way to directly access the pseudoclass' rules, but you could always append a new style element to the document's head like:

$('head').append('<style>.column:before{width:800px !important;}</style>');

See a live demo here

I also remember having seen a plugin that tackles this issue once but I couldn't find it on first googling unfortunately.

Modify pseudo-element :after's width using javascript

A pseudo-element is not part of the DOM. Therefore, you cannot change its CSS properties directly through JS.

In order to get your desired effect the way you want it, my best guess would be YUI.StyleSheet and manipulate the stylesheet itself, although I have to admit I haven't tested it myself in recent years.

Including such a utility and doing all of this calculation seems like a lot of work for width matching.

If you are willing to compromise a little bit on the semantic HTML, there is a working technique:

Your element takes the entire width of the screen. Wrapping the text with a span and adding the pseudo-element to that, as an inline-block should allow you to get the border under the text only

HTML:

<h1 class="title"><span>Hello World</span></h1>

CSS:

.title {
    border-bottom: 3px solid #aaa;
    position: relative;
}

.title span{
    display:inline-block;
    position:relative;
}

.title span:after {
    content: "";
    width: 100%;
    border-bottom: 3px solid red;
    display: block;
    position: absolute;
}

Here is my version of the codePen.

For future reference:

There is a W3C Candidate Recommendation that suggests the capability of using attributes for CSS properties other than content.

This way, if and when the recommendation is approved and implemented, it might be possible to have the pseudo-element reflect the parent's attributes, as such:

this.setAttribute("length", $(this).textWidth());

And the relevant CSS:

.title:after {
    ...
    width: attr(length px);
    ...
}

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

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

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

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

Retrieve and modify :before element with jQuery

JQuery cannot set css properties on :before content, since it is not contained in an element. If you want to be able to manipulate the color of the :before content with javascript, you can create an extra css class, and add/remove this class.

example

Modify CSS of the :after pseudo-element using jQuery

you can't select pseudo elements such as :before and :after with jquery. But in your case you can do a workaround to use the parent li's style on the :after and thus match the border-color property

codepen

CSS updated:

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
}
li:first-of-type.active {
  border-left-color: green; // your exact colors here
}
li:nth-of-type(2).active {
  border-left-color: orange;
}
li:last-of-type.active {
  border-left-color: purple;
}
li.active::after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 17px solid transparent;
    border-left-color: inherit;
}

and then just remove the line of js that includes the :after selector. not needed anymore

How to change #new-quote:before background using JQuery or JavaScript?

You can create a style tag with your custom css color and append it to head

See Example

colors = [  "#ff9966",  "#7f00ff",  "#396afc",  "#0cebeb",  "#06beb6",  "#642b73",  "#36d1dc",  "#cb356b",  "#3a1c71",  "#ef3b36",  "#159957",  "#000046",  "#007991",  "#56ccf2",  "#f2994a",  "#e44d26",  "#4ac29a",  "#f7971e",  "#34e89e",  "#6190e8",  "#3494e6",  "#ee0979"],randomNumber = Math.floor(Math.random() * colors.length);$('head').append("<style>.div1:before{background:"+ colors[randomNumber] + "}</style>");

.div1:before {  content: 'before  ';  display: inline-block;  padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">container2</div>

$(function() {
  $(".style-filter-item-options").click(function() {
    var percent = Math.round( $(this).position().left / $(document).width() * 100);
    console.log(percent);
    $("#video-index-hr-id .style-menus-bar").css("width", percent + "%");
  });
});

.style-menus-hr {
  background-color: #c4c4c4;
  border: none;
  display: block;
  height: 2px;
  overflow: visible;
  position: relative;
  max-width: 96%;
}

.style-menus-bar {
  background-color: #ff5c33;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 5%;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding-left: 15px; width: 100%">
  <a class="style-filter-item-options" style="color: #000 !important;" id="filter-option-id-latest">Latest</a>
  <a class="style-filter-item-options" id="filter-option-id-most-views">Most Views</a>
  <a class="style-filter-item-options" id="filter-option-id-random">Random</a>
  <div id="video-index-hr-id" class="style-menus-hr" style="margin-bottom: 1.25rem; width: 100%; margin-left: 0; margin-right: 0; padding-right: 0;">
    <div class="style-menus-bar">
    </div>
  </div>
</div>

<script>
    document.getElementById('abc').className = "minus";
</script>

<style>
    #abc:before {content: "+";}
    #abc.minus:before {content: "-"}
</style>

$('#foo').css('width','50%')