Underline CSS3 Transition

CSS transition not working with underline

Updated for 2021:

The support for text-decoration-color has come a long way, and common browser support requirements have loosened making it a viable option for most new projects. If you are only seeking a color transition, and can do without IE support, see this answer below.

---

Original answer:

You cannot change the color of the text-decoration independent of the color. However, you can achieve a similar effect with pseudo elements:

.un {
  display: inline-block;
}

.un::after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover::after {
  width: 100%;
}

<span class="un">Underlined Text - Or to be underlined</span>

Create Underline Transition CSS

If you apply width: 100% to the .underline rule it begins the animation from the center.

.underline {
  visibility: hidden;
  background-position: center;
  background-color: white;
  position: absolute;
  top: 60%;
  margin: 0;
  width: 100%;    /**** Change this to 100% ****/
  height: 10px;
  border-radius: 5px;
  transform: scaleX(0);
  webkit-transition: all .2s ease-in-out;
  transition: all .3s ease-in-out;
}

Adjusting the width of the line

To adjust the width of the line you can change the following:

  .underline{
    margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
    width: 80%;
  }

  .image-block:hover .underline {
    width: 80% /*<== Set to match the .underline width */
  }

* {

  box-sizing: border-box;

}

.row {

  min-width: 100%;

}

.flex-row {

  display: flex;

  flex-wrap: wrap;

}

.image-block {

  position: relative;

  width: 33.33%;

  float: left;

  margin-top: 0;

  z-index: 5;

}

.image-block:hover {

  -webkit-filter: grayscale(100%);

  /* Safari 6.0 - 9.0 */

  filter: grayscale(100%);

}

.image-block h3 {

  position: absolute;

  text-align: center;

  font-family: 'Roboto', sans-serif;

  color: white;

  top: 40%;

  width: 100%;

  font-size: 48px;

  letter-spacing: 5px;

  margin: 0;

  transition: all .3s ease-in-out;

}

.image-block:hover>h3 {

  letter-spacing: 8px;

  transition: all .3s ease-in-out;

}

.underline {

  visibility: hidden;

  background-position: center;

  background-color: white;

  position: absolute;

  top: 60%;

  margin: 0;

  width: 100%;

  /**** Change this to 100% ****/

  height: 10px;

  border-radius: 5px;

  transform: scaleX(0);

  webkit-transition: all .2s ease-in-out;

  transition: all .3s ease-in-out;

}

.image-block:hover .underline {

  visibility: visible;

  transform: scaleX(1);

  width: 100%;

  height: 10px;

  transition: all .3s ease-in-out;

}

.flex-image {

  width: 100%;

  height: auto;

  display: flex;

}

@media all and (max-width: 1200px) {

  .image-block {

    width: 33.33%%;

  }

}

@media all and (max-width: 1660px) {

  .navbar a {

    padding: 14px 14%;

  }

}

@media all and (max-width: 1035px) {

  .navbar a {

    padding: 14px 12%;

  }

}

@media all and (max-width: 880px) {

  #top-image {

    margin-top: 150px;

  }

  .image-block {

    width: 100%;

    margin: 0;

  }

  .navbar a:not(:first-child) {

    display: none;

  }

  .navbar a.icon {

    float: right;

    display: block;

  }

  .navbar.responsive {

    position: relative;

  }

  .navbar.responsive .icon {

    position: fixed;

    right: 0;

    top: 0;

  }

  .navbar.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

  .navbar a:hover {

    transform: scale(1);

  }

}

<div class="row flex-row">

  <div id="top-image" class="image-block">

    <h3>Fish Tail</h3>

    <div class="underline">

    </div>

    <img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">

  </div>

</div>

Text underline animation in CSS - the simplest way?

A simple background animation can do this:

a {
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  color: #f80;
  display: inline-block;
  padding: 0 .5em 0.2em;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}

I find <a href="#">dogs</a> pretty cool.

Underline css3 transition

This was a really tricky question.

The only solution I can come up with is to transition a border-bottom on :hover or I should actually say that I'm transitioning border-bottom, width and margin-right to make the border-bottom appear and at the same time keep, in this case, the links aligned.

Hard to explain, so I made a quick example which isn't perfect and looks a bit messy, but at least it shows how I mean. :-)

FIDDLE

HTML

<a href="#">Link</a><a href="#">Link</a>

CSS

a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}

a:hover {
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

Css animation to remove then add back text underline

You can do this with a background animation:

.link-underline{
  --n:4; /* adjust this to control the delay */

  text-decoration:none;
  display:inline-block;
  background:
    linear-gradient(to right,
       #000          calc(100%/var(--n)),
       transparent 0 calc((var(--n) - 1)*100%/var(--n)),
       #000 0) 
    bottom right/
    calc(var(--n)*100%) 1px 
    no-repeat;
}
.link-underline:hover {
  background-position:bottom left;
  transition:1.5s; /* adjust this to control the total duration */
}

<a href="#" class="link-underline">link underline.</a>

How to animate underline from left to right?

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

<span class="un">Underlined Text</span>

How to animate a link underline with border-bottom, so that there is space between the link text and the underline?

The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:

a {

  position: relative;

  color: #000;

  text-decoration: none;

}

a:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 2px;

  bottom: -5px;

  left: 0;

  background-color: #000;

  visibility: hidden;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

  -webkit-transition: all 0.3s ease-in-out 0s;

  transition: all 0.3s ease-in-out 0s;

}

a:hover:before {

  visibility: visible;

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}

<a href="#">Long long text</a>

---

Related Topics