I am trying to acplish the effect from this answer but without the text: Expand bottom border on hover

And know this can be acplished by growing the entire div from the center as with here: / but have no idea how to create this effect with line (i.e keeping the height static)

I have created my line here:

.line {
    background: white;
    width: 300px;
    top: 10%;
    height: 3.2px;
    margin:auto;
    position: relative;
}

And need to have the line grow from the center on page load. How can I do this?

I am trying to acplish the effect from this answer but without the text: Expand bottom border on hover

And know this can be acplished by growing the entire div from the center as with here: http://jsfiddle/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)

I have created my line here:

.line {
    background: white;
    width: 300px;
    top: 10%;
    height: 3.2px;
    margin:auto;
    position: relative;
}

And need to have the line grow from the center on page load. How can I do this?

• javascript
• html
• css

• "but without the text" What do you mean by "without the text"? – guest271314 Commented May 16, 2016 at 4:15
• If I tried to mimic the effect above I would use text-decoration to create the line, however I just have a div (no text) so I cannot use text-decoration. I need to understand how to grow a div only in width from center – blue Commented May 16, 2016 at 4:16

4 Answers 4

You can use css animation with animation-fill-mode set to forwards, setting @keyframes width from 0% to n%, left from 50% to 5%

body {
  width:100%;
}

div {
  display:block;
  position:absolute;
  top:45%;
  left:50%;
  border-bottom:4px solid red;
  width:0%;
  text-align:center;
  animation: line 2s linear forwards;
}

@keyframes line {
  from {
    left:50%;
    width:0%;
  }
  to {
    left:5%;
    width:90%;
  }
}

<div></div>

   @keyframes line_animation {
from {
	width: 0%;
}
to {
	width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear; 
}

Like this

<hr class="line" />
		

i have utilised display grid and SCSS to configure an authentic border animation

.top-border {
  grid-area: tb;
  // background: green;
  border-bottom: $border-config;
  width: 0%;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  animation-delay: $animation-delay;
}

.bottom-border {
  grid-area: bb;
  //to prevent being visible since it is going to be delayed
  width: 0%;
  // background: yellow;
  border-top: $border-config;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  // because both right and bottom will start animating after top and left + the intitial delay
  animation-delay: $animation-duration / 2 + $animation-delay;
}



  @keyframes expand-border-width {
  from {
    width:0%;
  }
  to {
    width:100%;
  }
}

check my sample to gain an explicit clarification

https://codepen.io/ino0r/pen/eYEgvrZ

You don't need keyframes for this if you're just transitioning the effect.

<div class="line"></div>

.line {
  width: 0%;
  height: 1px;
  position: absolute;
  left: 50%;
  background: #f00;
  transition: all 1s;
}

.line:hover {
  width: 100%;
  left: 0%;
}