この質問は、私の前の質問の続きです。
私はこのウェブサイトからいくつかのスタイルを使用しています。アンダースコア効果のスライドを作成するには、このjsfiddleの例を参照してください。私の前の質問は、行が右から左に入るようにこれをどのように適応させるかを尋ねていました。テキストの上に、このjsfiddleの例を参照してください。
次のステップは、これらの両方を1つの要素に追加することです。これにより、1つの線が下から左から右にスライドし、もう1つの線が上から右から左にスライドします。
これらの両方を一緒に追加しようとすると、一番上のものだけが表示されているようです。この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%;
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%;
height:2px;
}<h1 class="cmn-t-underline cmn-t-overline">Test</h1>あなたは:beforeあなたのトップラインと:afterあなたのボトムラインのために利用しなければなりません。2番目の「：after」は最初の「：after」をオーバーライドするため、1行だけになります。
私はあなたのjsFiddleを編集しました：http：//jsfiddle.net/7k4rLdno/
私は2番目:afterを変更しただけで:before、すべてがうまく機能します。
まったく同じ要素を2つ:afterまたは2つ持つことはできません:before。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加