Fade in and out underline when hovering?

Question

How can I make a fade in and out underline when I hover onto my links?

I can't use border-bottom property, because some of my links are tabs, so if I use border-bottom, the div gets underline and not the text. I need only the text to be underlined.

Is there a way to do that using CSS, or JS..?

Here is the HTML I would like to add the effect in:

<div class="tabcordion">
  <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
    <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    <li class="option3"><a data-target=".BESUCH">BESUCH</a></li>
    <li class="option4"><a data-target=".MITGLIED">MITGLIED</a></li>
    <li class="option5"><a data-target=".PROJEKTBERATUNG">PROJEKTBERATUNG</a></li>
  </ul>
</div>

Are you wanting just the the underline to fade or all of the text? I ask because I don't think you can do just the underline the way it is. — Tyler Christian, Sep 08 '17 at 15:34
@TylerChristian I need just the underline to fade in/out. But since my text is always black (underline or not), maybe it doesn't matter? — Lolo, Sep 08 '17 at 15:36
Well, if I understand what you are saying correctly, you would need to develop a different scheme, probably using `
` or some other element to underline the text. Because if you fade the `` it will do it all. — Tyler Christian, Sep 08 '17 at 15:38
There are several ways of doing this, but it really depends on the structure of your page. If you wrap the text in a `span` or something similar, you can add a border-bottom to that, and then `animate` that through CSS. — Tijmen, Sep 08 '17 at 15:38
I think I would use `@keyframes` to set the beginning and end opacity/color. https://stackoverflow.com/questions/24363205/css-background-color-keyframes-animation — Tyler Christian, Sep 08 '17 at 15:39
@TylerChristian Then I would need to set beginning and end opacity/color only on the underline. Is there a way to do that? — Lolo, Sep 08 '17 at 15:41

score 9 · Answer 1 · answered Sep 08 '17 at 15:52

9

You can use the text-decoration property and transition the color'

text-decoration-color @ MDN

a {
  text-decoration: underline solid transparent;
  transition: text-decoration 1s ease;
  display: block;
  width: 100px;
  border: 1px solid green;
  margin: 1em auto;
  border-radius: 1em;
  padding: 1em;
}

a:hover {
  text-decoration: underline solid Currentcolor;
}

<a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>

answered Sep 08 '17 at 15:52

Paulie_D

107,962
13
142
161

It works, but only on Firefox and Chrome. Doesn't work on Safari… Is there a way to make this solution work on every browsers? – Lolo Sep 08 '17 at 16:08
MDN indicates that Safari needs a `-webkit`prefix (no luck with IE though). – Paulie_D Sep 08 '17 at 16:12
Ok ! How do I have to write the code with the `-webkit` prefix? – Lolo Sep 08 '17 at 16:21
Use the individual properties like `text-decoration-color` There's more on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration – Paulie_D Sep 08 '17 at 16:22
I had a look on MDN. But when I use the prefix `-webkit-` it remove all my underlined text and hover… – Lolo Sep 08 '17 at 16:31
exactly what i needed. – Galzor Nov 03 '18 at 12:09

score 1 · Answer 2 · answered Sep 08 '17 at 15:42

1

a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0 ,0);
  transition: border-bottom 300ms;
}
a:hover {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

<a href="#">qwerty lorem</a>

You should use border-bottom and animate that by using rgba and altering the value for the opacity.

answered Sep 08 '17 at 15:42

Sam Willis

4,001
7
40
59

Yes. But I asked preferably for a not `border-bottom` solution. Because some of my links are in tabs (div) and then it underlines the div, and not the text. – Lolo Sep 08 '17 at 15:44
Can you show some html for this as it is hard to fix a problem that can't be seen. There will be a way to do this with `border-bottom`, it is just a matter of creating a selector that works for your dom structure. – Sam Willis Sep 08 '17 at 15:47

score 1 · Answer 3 · answered Sep 08 '17 at 15:47

1

You can use a pseudoelement

.tab {
  background: whitesmoke;
  padding: 1em;
  display: inline-block;
}

a {
  text-decoration: none;
  position: relative;
  font-size: 2em;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: black;
  opacity: 0;
  transition: 1s all ease-in-out;
}

a:hover:after {
  opacity: 1;
}

<div class="tab">
  <a href="#" class="underline">link</a>
</div>

answered Sep 08 '17 at 15:47

sol

22,311
6
42
59

This is actually a really smart way of doing it, since it works for divs as well as `a` tags. However, for a div you may want to `position` the pseudoelement up a little to avoid it being too low (outside the div/tab) – Tijmen Sep 08 '17 at 15:49

score 0 · Answer 4 · answered Sep 08 '17 at 15:44

I don't know if there is a way to do it with css text-decoration, but you could imitate it with border-bottom:

.posts a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  -webkit-transition: border 400ms ease;
  -moz-transition: border 400ms ease;
  -ms-transition: border 400ms ease;
  -o-transition: border 400ms ease;
  transition: border 400ms ease;
}

.posts a:hover,
.posts a:active {
  border-bottom: 1px solid black;
}

<div class="posts">
  <a href="#">something</a>
</div>

Fade in and out underline when hovering?

4 Answers4