Nrthugu

I'm working on a Wordpress site and I would like to select and change the content of a :after pseudo element ONLY in posts with a specific category tag.

My pseudo-code would go something like this:

- get the post category

- if post category == 'myCategory'

    .myElement:after{

       content: "new content here";

    }

I found the below code on another post and tried to adapt it to my use but with no luck.

function change_next_button(){

  $cat = get_the_category();



  if ( ! empty( $cat ) ) {

    $cat_name = $cat[0]->name;



    switch ($cat_name) {

      case 'nyhet':

        document.getElementsByClassName("button:after").style.content="next article";

        break;

    }

  } 

} 

Much appreciated if anyone could help out with a solution

You cannot change ::before and ::after pseudo-elements with JavaScript/jQuery as they aren't a part of the DOM.

What you can do is add a class in your case and do your styling on the stylesheet.

switch ($cat_name) {

  case 'nyhet':

    document.querySelector('yourelement').classList.add('newclass');

    break;

}

Then in your stylesheet;

.newclass::after {

  /* Your new styles */

  /* You may need to use !important - I don't know your CSS structure. */

 }