gpVyNb

gpVyNb.markdown

gpVyNb

A Pen by Yvain Liechti on CodePen.

License.

index.html

<div>hover</div>

style.css

div {
  position: relative;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  
  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    border: 1px solid transparent;
    box-sizing: border-box;
    height: 0;
    width: 0;
    transition: width 1s ease 0s, height 1s ease 1s;
  }
  &:before {
    left: 0;
    top: 0;
    border-width: 1px 0 0 1px;
  }
  &:after {
    right: 0;
    bottom: 0;
    border-width: 0 1px 1px 0;
  }
  
  &:hover {
    color: red;
    
    &:before,
    &:after {
      border-color: #000;
      height: 100%;
      width: 100%;
      transition: width 1s ease 1s, height 1s ease 0s;
    }
  }
}