Animated CSS Underline on Delay

Underlining text using transition on page load with a delay

How about using animation (keyframes), check snippet

PS: Run snippet and wait for 8 seconds.

#sec {  display: inline-block;  position: relative;  padding-bottom: 3px;}@-webkit-keyframes border {     from {width: 0px;}     to {width:100%}}
#sec:after {  content: '';  display: block;  margin: auto;  height: 3px;  width: 0px;  background: blue;    -webkit-animation-name: border; /* Safari 4.0 - 8.0 */  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */  animation-name: border;  animation-duration: 1s;  animation-delay: 8s;  animation-fill-mode: forwards;}

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div>

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>

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>

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>

Animate underline on click with just css

You can keep the hover and use the active with another background but the animation will work only when the key is pressed. You may decrease the duration to be sure it will end.

This way you will be sure to have the hover animation and the click one:

.un {  display: inline-block;  padding-bottom: 2px;  background-image: linear-gradient(#000, #000);  background-position: right -100% bottom 0;  background-size: 200% 2px;  background-repeat: no-repeat;  position:relative;  z-index:0;}
.un:before {  content:"";  position:absolute;  z-index:-1;  top:0;  left:0;  right:0;  bottom:0;  background:inherit;    background-position: right -100% bottom 0;}
.un:hover,.un:active:before {  background-position: left -100% bottom 0;  transition: background-position 0.5s;}

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

Is it possible to animate a CSS line-through text-decoration?

You can use a pseudo like this

Note (thanks to Phlame), this left-to-right animation won't work if the line to strike breaks in to a second line. For that one need to use yet another pseudo element and some script to position the two properly. Or use some other animation effect, e.g. like the one suggested in Oriol's answer.

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Animating bottom and top under/overline to meet

Take another element like span inside h1 and make border right and left effect on them.

for example

Html

<div class="dark sliding-middle-out">
  <h1 class=""><span>FAQs</span></h1>
</div>

css

.sliding-middle-out h1 span {
  position: relative;
}

.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
  content: '';
  display: block;
  margin: auto;
  width: 3px;
  transition: height 2s ease, background-color .5s ease;
  background: #B7D333;
  top: 0;
  bottom: 0;
  height: 0;
  position: absolute;
}
.sliding-middle-out h1 span:before {
  left: -5px;
}
.sliding-middle-out h1 span:after {
  right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
  height:50%;
}

Demo