使下划线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过渡更改方向

回答

相关问题