使下劃線CSS過渡更改方向

我使用this website上發現的某種樣式創建下劃線幻燈片。例如，請參閱jsfiddle。
正如你所看到的，下劃線從左到右。我將如何去在文本的頂部製作另一行，從右向左轉換？我可以簡單地調整我的當前代碼片段，還是必須完全使用其他方法？使下劃線CSS過渡更改方向

.cmn-t-underline { 
 
    position: relative; 
 
    color: #ff3296; 
 
} 
 
.cmn-t-underline:after { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -10px; 
 
    width: 0; 
 
    height: 10px; 
 
    background-color: #2E9AFE; 
 
    content: ""; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    height:2px; 
 
} 
 
.cmn-t-underline:hover { 
 
    color: #98004a; 
 
} 
 
.cmn-t-underline:hover:after { 
 
    width: 100%; 
 
\t height:2px; 
 
}

<h1 class="cmn-t-underline">Test</h1>

來源

2015-06-19 Toby Cannon

不錯的工作。我想這與轉換類型有關。 –

http://jsfiddle.net/juhL2256/1/

更改左到右。

.cmn-t-underline:after { 
    display: block; 
    position: absolute; 
    right: 0; 
    bottom: -10px; 
    width: 0; 
    height: 10px; 
    background-color: #2E9AFE; 
    content: ""; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
    height:2px; 
}

來源

2015-06-19 21:42:28 Leeish

我不知道它爲什麼起作用，但這是我第一次嘗試。我相信這是因爲參考點現在從右側開始而不是左側，並且在左側移動到100％狀態。 – Leeish

太棒了，似乎工作謝謝！有沒有辦法讓這行顯示在文本上方？ –

更改從底部到頂部https://jsfiddle.net/juhL2256/2/ – vals

試試這個，它作爲你想

.cmn-t-underline { 
 
    position: relative; 
 
    color: #ff3296; 
 
} 
 
.cmn-t-underline:after { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -10px; 
 
    width: 0; 
 
    height: 10px; 
 
    background-color: #2E9AFE; 
 
    content: ""; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    height:2px; 
 
} 
 
.cmn-t-underline:hover { 
 
    color: #98004a; 
 
} 
 
.cmn-t-underline:hover:after { 
 
    width: 100%; 
 
\t height:2px; 
 
} 
 

 
.cmn-t-underline:hover:before { 
 
    width: 100%; 
 
\t height:2px; 
 
} 
 

 
.cmn-t-underline:before { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0px; 
 
    width: 0; 
 
    height: 10px; 
 
    background-color: #2E9AFE; 
 
    content: ""; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    height:2px; 
 
}

<h1 class="cmn-t-underline">Test</h1>

來源

2015-06-19 21:50:01 Jala

爲什麼人們發佈完全相同的答案10分鐘後，已經發布解決問題？ – Leeish

我不知道;）..當我回答問題時，我花時間試着解決小提琴中的問題，所以我沒有看到你的意見......另一方面，我的答案與你不同，它吸引上下線:) – Jala

使下劃線CSS過渡更改方向

回答

相關問題