原文地址：

感想： 伪元素作为背景变化。

HTML code：

        
    
         
        
          
            h            o            m            e        
        
          
            p            r            o            d            u            c            t            s        
        
          
            s            e            v            i            c            e            s        
        
          
            c            o            n            t            a            c            t        
    
         
        

CSS code：

html, body,ul {
          margin: 0;    padding: 0;}ul{
          list-style: none;}body{
          height: 100vh;    display: flex;    justify-content: center;    align-items: center;    background: linear-gradient(to right bottom, dimgray, black);}/* 单词左侧加一条鼠标悬停时变亮的竖线 */li{
          margin: 1em 0;    padding-left: 2em;    border: 2px solid transparent;    border-left-color: silver;    text-align: center;    transition: 50ms;}li:hover{
          border-left-color: white;}li:hover span{
          color: #333;    transition-delay: calc(80ms * var(--n) + 10ms);}li span{
          position: relative;    color: white;    font-size: 50px;    font-family: monospace;    text-transform: uppercase;    letter-spacing: 0.1em;    /* 定义过渡所花时间 */    transition: 500ms;}li span::before{
          position: absolute;    content:'';    height: 100%;    width: 0;    z-index: -1;    transition: 500ms;}li:hover span::before{
          width: 70%;    transform: rotate(-25deg);    background: white;    transition-delay: calc(80ms * var(--n));}li span:nth-child(1) {
          --n: 1;}li span:nth-child(2) {
          --n: 2;}li span:nth-child(3) {
          --n: 3;}li span:nth-child(4) {
          --n: 4;}li span:nth-child(5) {
          --n: 5;}li span:nth-child(6) {
          --n: 6;}li span:nth-child(7) {
          --n: 7;}li span:nth-child(8) {
          --n: 8;}