Odtnhj

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':
 echo '<script type="text/javascript">document.querySelector(".yourbutton").classList.add("newclass");'</script>
 break;

Then in your stylesheet;

.newclass::after 
 /* Your new styles */
 /* You may need to use !important - I don't know your CSS structure. */