CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 149

CSS border-bottom should extend when hover

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?

Upvotes: 3

Views: 1466

Answers (5)

Si7ius
Si7ius

Reputation: 748

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>

Upvotes: 0

Paul
Paul

Reputation: 633

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

Upvotes: 1

web-tiki
web-tiki

Reputation: 103750

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>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 7

Aaronstran
Aaronstran

Reputation: 131

You could try this.

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

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

This worked for me.

Upvotes: -2

Related Questions