Как сделать чтобы кнопка подчеркивалась не полностью?

Question

[Steel_Designer]

Мне нужно чтобы кнопки подчеркивались не полностью( как на скрине ), а при наведении на кнопку она подчеркивалась, при том была плавная анимация

Comments

[backEndDeveloper]

border-bottom в сss копайте в эту сторону

[Артем]

backEndDeveloper, как через border-bottom сделать не полное подчеркивание?

[backEndDeveloper]

Артем,

a {
  width   : 200px;
  height  : 50px;   
  position: relative;
}
a:after {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid #000;
}

[Lord_Dantes]

backEndDeveloper, можно вместо border, height использовать

[Артем]

Slave, вы же все равно регулируете ширину псевдоэлемента свойством width
Я думал знаете способ без псевдоэлементов только на border'ах

[Lord_Dantes]

Артем, при наведении делаете width: 100%
В чем проблема?

Answer 1

[Артем]

:after или :before
У кнопки позиционирование relative, у :after (или :before) - absolute
Устанавливаете left: 0 и bottom: 0
width: 20px, например
При наведении через :hover устанавливаете width: 100%

transition: 1s width - чтобы плавно было

Answer 2

[Николай]

Полоску сделать псевдо элементом кнопки, например :after

Answer 3

[Артём Ведищев]

Попробуй так
https://jsfiddle.net/oupz926b/

Answer 4

[Виталий Кузнецов]

Вот так проще всего
https://codepen.io/vitaly44/pen/MxPexJ

ну и далее уже сами играйтесь как хотите :-)