今天我們來用前兩天的概念實作一個 hover 效果

hover 前

hover 後

首先，先簡單寫好 html

<div class="container">
  <div class="moreBtnText">MORE</div>  
</div>

將 .moreBtnText 的基礎 CSS 寫好。
如同 Day 3 提到的，將當作基準位置的 .moreBtnText 加上 position: relative;

.moreBtnText {
  font-size: 72px;
  color: #AA0601;
  font-weight: 700;
  position: relative;
  z-index: 100;
  white-space: nowrap;
}

接著，用偽元素 ::before 和 ::after 製作 hover 時會出現的兩個 MORE 。
記得設定為 position: absolute;
transition: all .65s .1s; 是用來設定 hover 時的動畫效果和速度。
transform: translateY(0px); 設定物件的 Y 軸移動距離，因為一開始要讓它藏在原本的 MORE 後面，所以設定為 0 px。

.moreBtnText::before {
  content: "MORE";
  position: absolute;
  color: #AA0601;
  transition: all .65s .1s;
  transform: translateY(0px);
}

.moreBtnText::after {
  content: "MORE";
  position: absolute;
  color: #AA0601;
  transition: all .65s .1s;
  transform: translateY(0px);
  left: 0;
} 

重頭戲來了！設定兩個偽元素 hover 的效果。
依照希望他們出現的位置設定 translateY (以目前的 Y 軸方向的話，數字越大會往下跑，負數則是往上跑)
並用 opacity 調整字體的透明度。

.moreBtnText:hover::before {
  transform: translateY(-45px);
  opacity: .7;
}

.moreBtnText:hover::after {
  transform: translateY(-95px);
  opacity: .4;
}

最後全部的 code 會長這樣

.moreBtnText {
  font-size: 72px;
  color: #AA0601;
  font-weight: 700;
  position: relative;
  z-index: 100;
  white-space: nowrap;
}

.moreBtnText::before {
  content: "MORE";
  position: absolute;
  color: #AA0601;
  transition: all .65s .1s;
  transform: translateY(0px);
}

.moreBtnText:hover::before {
  transform: translateY(-45px);
  opacity: .7;
}

.moreBtnText::after {
  content: "MORE";
  position: absolute;
  color: #AA0601;
  transition: all .65s .1s;
  transform: translateY(0px);
  left: 0;
}

.moreBtnText:hover::after {
  transform: translateY(-95px);
  opacity: .4;
}

最後可以點這邊看看在 codepen 上的實際效果喔。