Hover replacement text without HTML markup

by ecmanaut

HTML

<!DOCTYPE html>
<html><head>
<title>Hover replacement text</title>
</head><body>
  <div class="upper">
    <div class="byline"><br>A new way to let your creativity shine</div>
  </div>
</body></html>

CSS

.upper {
  position: relative;
  outline:  1px dashed orange;
  overflow: hidden;
  height:   45px;
  width:    100%;
}

.byline {
  padding:     0 0 0 163px;
  font-size:   13px;
  font-style:  italic;
  line-height: 45px;
  height:      90px;
  position:    absolute;

  -webkit-transition-property: top;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.5);
  top:         -45px;
}
.upper:hover .byline {
  top:        0px;
}
.upper:hover .byline:before {
  content: "Back to homepage";
}