ホバー上で背景の位置を左から右に変えるより効率的な方法はありますか？

Question

これは、ちょうど背景が変化しているにもかかわらず、左のボーダーがホバー上に広がるように見えるようにするためのコードです。このコードを書くより効率的な方法はありますか？

編集：効率的な意味で、より良い書き方です。

span { 
 
    padding: 5px; 
 
    text-align: center; 
 
    border-left: 5px solid black; 
 
    background: linear-gradient(to left, yellow 50%, black 50%); 
 
    background-size: 200%, 100%; 
 
    background-position: right; 
 
    transition: .5s ease; 
 
} 
 

 
span:hover { 
 
    background-position: left; 
 
    color: white; 
 
}

<span>This is some example text.</span>

Answer 1

あなたは、パフォーマンス向上のための擬似要素に変換し、このように追加することができますように私は、このようなもののための擬似要素を使用して好みます。

この問題は、z-indexを使用して擬似要素の上にテキストを配置できるように、別の要素にスパンをラップする必要があるという点のみです。それ以外の場合は、あなたのテキストをカバーします。

span { 
 
    color: black; 
 
    transition: color .5s ease; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
p { 
 
    padding: 5px; 
 
    text-align: center; 
 
    border-left: 5px solid black; 
 
    background-color: yellow; 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 

 
p::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: black; 
 
    transition: transform .5s ease; 
 
    transform: translateX(-100%); 
 
    will-change: transform; 
 
    z-index: 1; 
 
} 
 

 
p:hover::after { 
 
    transform: translateX(0); 
 
} 
 

 
p:hover span { 
 
    color: white; 
 
}

<p><span>This is some example text.</span></p>