CSS Hover Underline Animation-CodePudding

I'm trying to create a line animation when I hover over a piece of text. Here's the code I have right now, but it's not working.

[data-predefined-style="true"] small {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.2;
    font-family: "Diatype Variable", Icons;
    font-style: normal;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] small a {
    color: rgba(0, 0, 0, 0.85);
    border-bottom-width: 0em;
}

[data-predefined-style="true"] small a:hover {
    color: rgba(0, 46, 207, 0.8);
    border-bottom-width: 0em;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

I have the code for the hover animation, but I'm not exactly sure how to implement it. Help is greatly appreciated, thank you so much!

CodePudding user response：

Seems to be working. What kind of effect are you after?

[data-predefined-style="true"] small {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1.2;
  font-family: "Diatype Variable", Icons;
  font-style: normal;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small a {
  color: rgba(0, 0, 0, 0.85);
  border-bottom-width: 0em;
}

[data-predefined-style="true"] small a:hover {
  color: rgba(0, 46, 207, 0.8);
  border-bottom-width: 0em;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

<div >Hello world</div>

CodePudding user response：

hope this can help you

[data-predefined-style="true"] small {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.2;
    font-family: "Diatype Variable", Icons;
    font-style: normal;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] small a {
    color: rgba(0, 0, 0, 0.85);
    border-bottom-width: 0em;
}

[data-predefined-style="true"] small a:hover {
    color: rgba(0, 46, 207, 0.8);
    border-bottom-width: 0em;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

<h2 >text with underline animation</h2>