Anton Heikinheimo Anton Heikinheimo - 6 months ago 41
CSS Question

Animating bottom and top under/overline to meet

I've been working on an element where the "borders" or under/overlines would meet on the left and right side of the element in a slow transition.

This is where I've got so far: http://codepen.io/anon/pen/RRNjgo



.sliding-middle-out:hover {
font-size: 30px;
transition: font-size 2s ease;


}

.dark {
background-color: black;
display: inline-block;
min-width: 200px;
min-height: 300px;text-align: center;
cursor: pointer;
}

.dark h1 {
color: white;
text-align: center;
}

.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out h1:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:after {
width: 50%;
background: #b7d333;
}

.sliding-middle-out h1:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:before {
width: 50%;
background: #b7d333;
border-left: 1px solid black;
}

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





One approach I tried was to display borders on the h1 element after the under/overline transition was finished, but couldn't get it to work.

But I cant figure out how i would get the desired effect.

got the base for this project from here.
http://bradsknutson.com/blog/css-sliding-underline/

Answer

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

Comments