Transform and transition not working with list button CSS

Hi all 🙂

Busy building a new site, and have successfully used the below code to add an arrow to all button types, and then on hover, animate the button to rotate 180 degrees. This is working for all non list buttons. 

///add arrow to button, and rotate 180 on hover ///

.sqs-block-button-element:after{ content: "➔";

font-size:0.8rem;

padding: 0px 10px;

  vertical-align:middle;}

.sqs-block-button-element:hover::after {

   -webkit-transition: 0.5s ease-in-out;

    transition: 0.5s ease-in-out;

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform:rotate(180deg)}

However when I try to do the same for list buttons with the below code it isn't working.

.list-item-content__button.sqs-block-button-element:after{ content: "➔"!important;
font-size:0.8rem;
padding: 0px 10px;
  vertical-align:middle;}

.list-item-content__button.sqs-block-button-element:hover::after {
   -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform:rotate(180deg)}

I have tested that I am targeting the correct element, and just the 'after' content (that is the arrow) by using other attributes such as colour, and that works as intended.

But using transition and transform I get no results...
Any ideas? 🙃

Hi,

Can you share link to page where you use list button? We can test code easier

Thanks for the reply 🙂

The client ended up cutting that list out the design so don't need to solve the issue.

You're welcome to delete the thread, but it might be helpful as the code is useful for regular buttons.