3

I want to create a border animation. If i hover over the link, the border-bottom should extend from the left side to the right side. I searched alot, but i dont know how to name it.

Here is my Code:

.a{
    width: 200px;
    display: inline-block;
    transition: 0.5s all;
}

.a:hover{
    border-bottom: 5px solid #037CA9;
}
<a>Benutzername:</a>

How must i design this elemt, that a border-bottom extend from the left to the right side?

Skeptar
  • 149
  • 1
  • 10

5 Answers5

7

You could use a positioned pseudo-element

a {
  text-decoration: none;
  position: relative;
}
a::before {
  content: '';
  position: absolute;
  background: red;
  height: 2px;
  top: 100%;
  left: 0;
  width: 0%;
  transition: width 0.5s ease;
}
a:hover::before {
  width: 100%;
}
<a href="#">Benutzername:</a>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • You should point out that it doesnt work in older IE because CSS3 wasnt supported back then – flx Mar 18 '15 at 20:20
  • 2
    The OP was already using a transition, I don't think CSS3 is an issue here. – Paulie_D Mar 18 '15 at 20:22
  • 1
    It is probably irrelevant to the question as this transition is simple but it should be noted that transitioning the size of an element with width/height is more expensive (performance related) than with the transform property. [see here](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) – web-tiki Mar 18 '15 at 20:38
2

You can use a pseudo element scaled to 0.001 and scale it back to 1 on hover. This approach is dercibed in an other question: Expand border from center on hover

To make it expand form the left, you just need to change the transform origin to 0 0 :

a{
  display:inline-block;
}
a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform-origin:0 0;
  transform: scaleX(0.001);
  transition: transform 250ms ease-in-out;
}
a:hover:after {
  transform: scaleX(1);
}
<a>Benutzername:</a>
Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
1

I think that you're trying to get something like this fiddle below. I made a little example with an styled <a> tag and used the pseudo <a> element and gave it a transition to make it extend when you hover it.

a {
    position:relative;
    display:inline-block;
    padding:5px 10px;
    color:#444;
    background:#f3f3f3;
    text-decoration:none;
}
a:after {
    content:'';
    position:absolute;
    background:green;
    display:block;
    height:2px;
    bottom:-2px;
    left:0;
    min-width:0;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
}

a:hover:after {
    min-width:100%;
}
<a href="#">Hover button</a>

maybe add some more browser specific css transitions to be more multi browser compatible. For more info on that take a look HERE

jsFIDDLE

Community
  • 1
  • 1
Paul
  • 633
  • 2
  • 13
  • 22
0

If someone wants to extend the line from center there is solution:

a {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  background: #2a57b3;
  display: block;
  height: 2px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}
a:hover:after {
  width: 100%;
  margin-left: -50%;
}
<a>Hover me!</a>
Si7ius
  • 676
  • 6
  • 14
-2

You could try this.

#divname {
position:absolute;
top:0;
height:500px;
}

#divname:hover {
position:absolute;
top:0;
height:600px;
}

This worked for me.

Aaronstran
  • 131
  • 7
  • This doesn't animate nor have a border. – j08691 Mar 18 '15 at 20:11
  • I'm sorry, i misunderstood what he meant, down voting someone who is trying to help does nothing. All he would have to do is add a border to that, and make a transition. – Aaronstran Mar 18 '15 at 20:44
  • Actually, downvoting an answer like what you posted is exactly the point of downvoting. You yourself admitted that you misunderstood what the OP meant, and your answer isn't useful. Don't take downvotes personally. – j08691 Mar 18 '15 at 20:50
  • Not my point if added one or two things it would've been what he needed. If it doesn't work he could use another answer. – Aaronstran Mar 18 '15 at 20:51