Vurgulu içeri ve dışarı doğru soldan sağa alt çizgi

Question

Aşağıdaki kodla, soldan sağa bir vurgu alt çizgi etkisi alıyorum.

sen vurgulu değiliz

.underline { 
 
    display: inline; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.underline:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    right: 100%; 
 
    bottom: -5px; 
 
    background: #000; 
 
    height: 4px; 
 
    transition-property: left right; 
 
    transition-duration: 0.3s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.underline:hover:after, 
 
.underline:focus:after, 
 
.underline:active:after { 
 
    right: 0; 
 
}

<p>hello, link is <a href="#" class="underline">underline</a> 
 
</p>

: solda, başlangıç ​​durumuna eleman döndükten sonra. : sağdaki numarasına gittikten sonra vurgulu bıraktığınızda sola dönmenin herhangi bir yolu var mı?

Answer 1

Sağ/sol özelliklerin yerine genişlikteki animasyonları deneyebilirsiniz.

.underline { 
 
    display: inline; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.underline:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    right: 0; 
 
    width: 0; 
 
    bottom: -5px; 
 
    background: #000; 
 
    height: 4px; 
 
    transition-property: width; 
 
    transition-duration: 0.3s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.underline:hover:after, 
 
.underline:focus:after, 
 
.underline:active:after { 
 
    left: 0; 
 
    right: auto; 
 
    width: 100%; 
 
}

<p>hello, link is <a href="#" class="underline">underline</a></p>

çalışan bir örneğin bu keman bakınız: Bu yanıt dayanarak https://jsfiddle.net/1gyksyoa/

Answer 2

: Expand bottom border on hover siz "dışarı hover" etkiyi elde etmek için vurgulu üzerinde transform-origin özelliğini değiştirebilir sen arıyoruz. JQuery [vurgulu] (https://api.jquery.com/hover/) fonksiyonu ile çapa etiketi için bir sınıf ekleyebilir ve bazı tasarım koyabilirsiniz

.expand{ 
 
    position:relative; 
 
    text-decoration:none; 
 
    display:inline-block; 
 
} 
 
.expand:after { 
 
    display:block; 
 
    content: ''; 
 
    border-bottom: solid 3px #000; 
 
    transform: scaleX(0); 
 
    transition: transform 250ms ease-in-out; 
 
    transform-origin:100% 50% 
 
} 
 
.expand:hover:after { 
 
    transform: scaleX(1); 
 
    transform-origin:0 50%; 
 
}

Here is some dummy text <a href="#" class="expand">expand</a>