在文本上方和下方添加換行

此問題是從my previous question開始的後續操作。
我有一些從this website使用的風格，以創建下劃線效果幻燈片，請參閱此示例jsfiddle。我之前的問題是詢問如何調整它，以便線條從右到左進行調整，並且在文本上方，請參閱jsfiddle上的示例。在文本上方和下方添加換行

我的下一步是將這兩個元素添加到一個元素中，所以一行從左到右滑動到底部，另一個從右到左滑動到頂部。

當我試圖將這兩個加在一起時，它似乎只顯示頂部，請參閱此jsfiddle。

我的問題是如何添加行中的頂部幻燈片和行中的底部幻燈片？

.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-overline { 
 
    position: relative; 
 
    color: #ff3296; 
 
} 
 
.cmn-t-overline:after { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: -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-overline:hover { 
 
    color: #98004a; 
 
} 
 
.cmn-t-overline:hover:after { 
 
    width: 100%; 
 
\t height:2px; 
 
}

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

來源

2015-06-20 Toby Cannon

你必須利用:before您的頂線，併爲:after你的底線。你這樣做的方式第二個「：之後」覆蓋第一個，所以你最終只有一條線。

我編輯了自己的jsfiddle： http://jsfiddle.net/7k4rLdno/

我只是改變了第二:after與:before，一切運作良好。

你不能有兩個:after或兩個:before完全相同的元素。

來源

2015-06-20 18:38:05 ClementBresson

使用

:before - 頂線

:after - 底線

h1{ 
 
    position: relative; 
 
    color: #ff3296; 
 
} 
 
h1:before, 
 
h1:after { 
 
    display: block; 
 
    position: absolute; 
 
    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:before { 
 
    left: 0; 
 
    top: -10px; 
 
} 
 
h1:after { 
 
    right: 0; 
 
    bottom: -10px; 
 
} 
 
h1:hover { 
 
    color: #98004a; 
 
} 
 
h1:hover:after, 
 
h1:hover:before { 
 
    width: 100%; 
 
    height:2px; 
 
}

<h1>Test</h1>

Fiddle

來源

2015-06-20 19:20:49 Dmitriy

在文本上方和下方添加換行

回答

相關問題