.wrap
  p Here is some text which will contain some links for you to hover and see how nice a 
    a(href="/") cubic-bezier
    |  can make your hover effects, it's like a mini animation without the 
    a(href="/") @keyframes!
    |  If you wanna find out more about this transition effect then just click its link above. 

@import url('https://fonts.googleapis.com/css?family=Ubuntu:700');
$link: #EC407A;
.wrap {
  width: 50vw;
  box-sizing: border-box;
  line-height: 1.65;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  @media screen and (max-width: 800px) { 
		width: 75vw;
	}
  p {
    margin: 0 0 20px;
    font-size: 25px;
    &:last-child {
      margin: 0;
    }
    a {
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: $link;
      &::after {
        content: "";
        background: rgba($link, 0.25);
        position: absolute;
        left: 12px;
        bottom: -6px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        z-index: -1;
        transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
      }
      &:hover:after {
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 100%;
      }
    }
  }
}
body {
  background: #ECEFF1;
  font-family: 'Ubuntu', sans-serif;
  color: #2a2a2a;
}