Home / Questions / 35150
Accepted
akko
Asked: 2020-11-22 15:51:41 +0800 CST 2020-11-22 15:51:41 +0800 CST

How to change ::after and ::before of an element with Javascript?

  • 772

I need to change the content attribute of the after and before pseudo elements of the next HTML element without using libraries like jQuery . If I did something similar with CSS it would be something like this:

#text::before{background:red;display:block,content:"HolaMundo";}
#text::after{background:blue;color:red,font-size:100px;}

What would be the way to do it with Javascript?

var text = document.getElementById("text");
text...
javascript

4 Answers

  1. Best Answer

    You can set ::after and ::before to load the content of an attribute by default.

    In the example I used the "title" attribute:

    #text::after{
  content: attr(title);
}

    And then update it with Javascript.

    document.querySelector("#text").setAttribute("title" , "Nuevo texto")

    either

    document.querySelector("#text").title = "Nuevo texto";
    • 5

  2. Unfortunately, it is not possible to select or change a psuedo element directly with JavaScript. However, it can be done with a combination of CSS and JavaScript. For example, you could create some classes with different content in the psuedo element, and use JavaScript to change the class:

    CSS:

    #text::before {
    content: "HolaMundo";
}

#text.nombre {
    content: "Mi nombre es...";
}

    JavaScript:

    // Decir nombre
document.querySelector("#text").classList.add("nombre");

// Decir HolaMundo
document.querySelector("#text").classList.remove("nombre");
    • 3

  3. As they said, you can't change the pseudo elements since they don't belong to the DOM.

    In the following code I simulate with the help of attribute selectors and a little bit of jshow it could be done:

    var text = document.getElementById('texto');

function changeToAfter(id) {
  
  // Creamos el atributo data-class con el contenido after
  document.getElementById(id).setAttribute('data-class', 'after');
}

function changeToBefore(id){

  // Creamos el atributo data-class con el contenido before
  document.getElementById(id).setAttribute('data-class', 'before'); 
}

document.getElementById('after').onclick = function() {
  
    changeToAfter(text.id);
};

document.getElementById('before').onclick = function() {
  
    changeToBefore(text.id);
};
    [data-class=before]::before{
  background: red;
  content: 'Hello ';
  background: red;
}

[data-class=after]::after {
  content: ' world!';
  background: pink;
}

/* solo para dar un poooco de estilo a los botones que están feísimos */
button {
  outline: 0; 
  width: 100px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

button:hover {
  background: gray;
}
    <p id="texto"> wonderful </p> 

<!-- Solo para simulación -->
<button id="before">Before</button> 
<button id="after">After</button>

    • 3

  4. One thing you can do is create an element <style id="myStyle">into which you can add content mid-run and thus have a little more control over the situation. I have used it and it works great.

    • 0