Modify Pseudo-Element :After's Width Using JavaScript

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);
    ...
}

Changing pseudo-element style from javascript

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.
The workaround is to create a <span> instead of using :before and the same logic has to be applied.

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

Making the width of pseudo a::after as the container

You can either add:

.test {
  display: inline-block;
}

or

.test a {
  display: inline-block;
}

So that the size of the box matches the content.

.test {  display: inline-block;}
.test a {  font-size: 5vw;  text-decoration: none;  color: #000;}
.test a::after {  content: '';  display: block;  height: 0.1em;  left: 0;  background-color: #000;  transition: 0.5s ease-in-out;  width: 0;}
.test a:hover::after {  width: 100%;}

<div class="test">  <a href="#">text for the test</a></div>

modify pseudo select :after in javascript

If that style comes from a CSS file, you'll have to search for it in document.styleSheets, which will be messy.

If you are open to dynamically creating a <style> element containing that CSS instead, you can modify it programmatically.

var slidingTagLiAfterStyle = document.createElement("style");
slidingTagLiAfterStyle.innerHTML =
 ".slidingTag li:after {
    content: '';
    z-index: 3;
    height: 6px;
  }";
document.head.appendChild(slidingTagLiAfterStyle);

...

slidingTagLiAfterStyle.innerHTML = slidingTagLiAfterStyle.innerHTML.replace(/height: [0-9]+px/, "height: 12px"); // or whatever you want to set it to

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.

How to change css pseudo elements in javascript?

As per my knowledge you can not modify pseudo style directly, but you can insert the CSS to the head portion of the DOM by this way,

jQuery

$( "div" ).click(function() {

  $('<style>p:before{top:10px}</style>').appendTo('head');

});

Check this Demo jsFiddle

---

Related Topics