7.1 Animated Underline on Hover: for Mobile 'left to right' and Desktop 'outwards'

Site URL: https://mandarin-violin-mjw7.squarespace.com

Dear Squarespace community, 

For my site I wish to have an animated underline that differs for Mobile and Desktop. 

For Mobile I would like an underline that goes from left to right on hover.

For Desktop I would like an underline that goes outwards from the centre.

https://mandarin-violin-mjw7.squarespace.com/config/

the password is: elise

Does someone have css code to realize this?

Warmly, Elise

Try adding to Design > Custom CSS

/* link hover */
.header-nav-item {
a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
}
a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover:after {
    width: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
}

On 7/18/2021 at 2:28 AM, tuanphan said:

Try adding to Design > Custom CSS

/* link hover */
.header-nav-item {
a {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
}
a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover:after {
    width: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
}

 

Dear @tuanphan, 

Thank you for your reply 🙂 I tried your code, however the effect is not what I had in mind . I managed to come close with the code below (see also my site). However I still face two problems;

1. The underline under the navigation is quite far from the title. How do I decrease this distance so that the underline is directly under the title ? 

2. For the mobile navigation, the animation takes the entire mobile screen. How can I adjust it so that it only underlines the title? 

/* navigation underline animation */
.header-nav-item::after {
  content: '';
  background: #FFFFFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 0px !important;
  transition: width 0.5s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}
 /* mobile navigation underline animation */
.header-menu-nav-item::after {
  content: '';
  background: #FFFFFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 5px !important;
  transition: width 0.5s; //animation speed
  margin: 0.6 auto;
}

.header-menu-nav-item:hover::after {
  width: 100%;
}

.header-menu-nav-item--active a {
    background-image: none !important;
}

@media screen and (max-width:767px) {
.header-menu-nav-item:hover::after {
    width: 50%;
}
}