Nav Menu - flip just the menu item and not the seperator

Site URL: https://monibarry.squarespace.com/

Hi there,

I'm trying to figure out if it's possible to flip just the text and not the "/" separators on my nav menu upon hover.

Site: https://monibarry.squarespace.com/
P/W: password123

Can anyone please help?

The code I have used for the seperator is;
 

.header-nav-item:not(:last-child) a:after {
    content: "/";
    color: black;
    font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 400;
font-style: normal;
  margin-left: 20px;
}

.header-nav-item a {
  background-repeat: no-repeat !important;
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.header-nav-item a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

Remove code you used to add "/" & add new code

div.header-nav-item:after {
    content: "/";
    color: #000;
    font-family: neue-haas-grotesk-display,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 20px;
}
div.header-nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

11 hours ago, tuanphan said:

Remove code you used to add "/" & add new code

div.header-nav-item:after {
    content: "/";
    color: #000;
    font-family: neue-haas-grotesk-display,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 20px;
}
div.header-nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

 

Thank you so much that worked perfectly!