文本上的CSS僞元素在換行後消失

我爲所有鏈接添加了「：after」元素（模擬「border-bottom」）等等：「hover」我可以爲這個僞元素設置動畫效果（「height：100 ％「）。這可以正常工作，但是當使用換行符分割鏈接時，僞元素在換行符後被打破。文本上的CSS僞元素在換行後消失

a { 
    color: red; 
    position: relative; 
    text-decoration: none; 

&:after { 
    transition: height .1s; 
    background-color: red; 
    bottom: -3px; 
    content: ''; 
    display: inline; 
    height: 3px; 
    left: 0; 
    right: 0; 
    position: absolute; 
    width: 100%; 
    z-index: -1; 
} 

&:hover:after { 
    height: calc(100% + 4px); 
} 

&:hover { 
    color: white; 
    } 
}

這裏是筆：

http://codepen.io/herrfischer/pen/YWKmQJ

任何想法，我做錯了什麼？

來源

2016-05-27 Henning Fischer

對於一個內聯元素，背景將是更有效的：http://codepen.io/gc-nomade/pen/pbzMYP

a { 
    color: red; 
    position: relative; 
    text-decoration: none; 
    background:linear-gradient(red,red) bottom repeat-x; 
    background-size:3px 3px; 
    transition:1s; 

    &:hover { 
    background-size:100% 100%; 
    color: white; 
    } 
}

來源

2016-05-27 09:58:09

這比我從另一個網站偷走的代碼還要好，謝謝。 –

@HenningFischer所以這些鏈接的動畫效果可能會因爲你而太... ... http://codepen.io/gc-nomade/pen/grRmBw http://codepen.io/gcyrillus/pen/yOzrxM –

不錯，我對於未來的網站設計，我會記住這一點......用激光;）。 –

被盜從另一個網站 - 它的工作原理與動畫背景漸變:)

a { 
    background-image: linear-gradient(red 0%, red 100%); 
    background-position: bottom; 
    background-repeat: repeat-x; 
    background-size: 0 0; 
    border-bottom: 3px solid red; 
    color: red; 
    position: relative; 
    text-decoration: none; 
    transition: 150ms ease; 

     &:hover { 
      color: white; 
      background-size: 1em 1.5em; 
     } 
    }

更新了筆。

來源

2016-05-27 09:58:20

文本上的CSS僞元素在換行後消失

回答

相關問題