CSSグラデーションは、私がこのようなリンクの末にグラデーションを作成したい

Question

を置くことにより、disaaperません。

マイHTMLコード（jsfiddle）：

<a href="#">https://<span class="txt">in Phrase Overview</span></a> 

CSSコード

.txt { 
    padding: 12px 16px; 
    color:blue; 
    top:0; 
    -webkit-box-shadow: -10px 0 10px -2px #ffffff; 
    box-shadow: -10px 0 10px -2px #ffffff; 
} 

span:hover {  
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

しかし、私はそれを置くと、勾配が消えない：

お願いします。この問題を確認するのを手伝ってください。

Answer 1

これにあなたのスタイルを変更

：

.txt{ 
    padding: 12px 16px; 
    color:blue; 
    top:0; 
    -webkit-box-shadow: -10px 0 10px -2px #ffffff; 
    box-shadow: -10px 0 10px -2px #ffffff; 
} 
a:hover span.txt{  
    -webkit-box-shadow: none; 
    box-shadow: none; 
}