Как анимировать переход границы с помощью CSS?

Question

Я пытаюсь создать переход CSS, где border-bottom из a href элемент расширяется на :hover по ширине ссылки.

То, что я мог бы найти это решение CSS, где background width оживляется: http://jsfiddle.net/mfn5nefb/82/

Но это не то, что я хочу, потому что после того, как нажать на вкладке навигации Я хочу покинуть границу, как есть. Поэтому мне пришлось бы непосредственно анимировать границу, вместо фона.

<!-- assume the border-bottom is only applied to an active=clicked navigation tab --> 
<h1 style="border-bottom: 3px solid green;">CSS IS AWESOME</h1> 

h1 { 
    color: #666; 
    position: relative; 
    display: inline-block; 
} 

h1:after { 
    position: absolute; 
    left: 50%; 
    content: ''; 
    height: 40px; 
    height: 5px; 
    background: #f00; 
    transition: all 0.5s linear; 
    width: 0; 
    bottom: 0; 
} 

h1:hover:after { 
    width: 270px; 
    margin-left: -135px; 
} 

Здесь вы видите, как «активная» ссылка получает зеленую рамку. И при наведении мыши я хотел бы оживить другие вкладки, но сама граница. В настоящее время фон анимируется, который появляется выше границы и, следовательно, выглядит несогласованным.

Answer 1

Вы все еще можете достичь этого с помощью псевдоэлемента (с background) и развернуть его на hover. Все, что требуется, - установить значение свойства bottom как обратное ожидаемому border-width, а также установить height псевдоэлемента как то же, что и border-width.

h1 { 
 
    color: #666; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    left: 50%; 
 
    content: ''; 
 
    height: 3px; 
 
    background: #f00; 
 
    transition: all 0.5s linear; 
 
    width: 0; 
 
    bottom: -3px; 
 
} 
 
h1:hover:after { 
 
    width: 100%; 
 
    left: 0px; 
 
}

<!-- assume the border-bottom is only applied to an active=clicked navigation tab --> 
 
<h1 style="border-bottom: 3px solid green;">Tab1</h1> 
 
<h1>Tab2</h1>

---

Другой способ добиться того же эффекта с помощью border свойство само по себе было бы использовать transform: scale как в приведенном ниже фрагменте кода. Здесь scaleX(0) делает исходную ширину элемента равным 0, а на hover он переводится в полную ширину, используя scaleX(1). Поскольку по умолчанию transform-origin находится на 50% по оси X, граница выглядит так, как будто она расширяется от центра.

h1 { 
 
    color: #666; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    left: 0%; 
 
    top: 0%; 
 
    content: ''; 
 
    height: 100%; 
 
    transition: all 0.5s linear; 
 
    width: 100%; 
 
    border-bottom: 3px solid red; 
 
    transform: scaleX(0); 
 
} 
 
h1:hover:after { 
 
    transform: scale(1); 
 
}

<!-- assume the border-bottom is only applied to an active=clicked navigation tab --> 
 
<h1 style="border-bottom: 3px solid green;">Tab1</h1> 
 
<h1>Tab2</h1>