Как анимировать border?

Question

[arthur_sites]

Необходимо, чтобы при наведении курсора на блок, border-bottom плавно заполнялась слева направо черным, например, цветом. Подскажите, как это реализовать

Answer 1

[Владимир Ионенко]

не знаю как с помощью бордера, но можно реализовать с помощью абсолютно расположенного єлемента. Примерно так :

.element {
	padding: 30px;
	background: #eee;
	position: relative;
	&:after {
		position: absolute;
		content:"";
		width: 0;
		height: 2px;
		background: red;
		bottom: 0;
		right: 0;
		left: 0;
		transition: all .5s;   
	} 

	&:hover {
		&:after {
			width: 100%; 
		}
	}
}

вот как это выглядит
https://jsfiddle.net/ionenkovladimir/qb5m057o/

Answer 2

[iBird Rose]

именно border - никак. но такой эффект делается через absolute элемент, который находится под элементом. и задается ему width: 0; а потом через transition дается ему width: 100%; - тогда ты получишь такой эффект