Как правильно сделать растягивание кнопок псевдоэлементом:after?

Question

[igorstec]

вот пример
не пойму как убрать эти пробелы
спасибо большее за ответ

Comments

[IceJOKER]

jsfiddle.net/Lhr2p7o6/10

Answer 1

[Алексей Карагодников]

Пояснения из этой статьи: Загадочные отступы» между инлайн-элементами

Причина кроется в том, что, inline-block ведет себя, как обычная буква, а значит так же, как и простой текст — имеет пробелы между словами. Эти пробелы можно отчётливо наблюдать в разных веб-инспекторах, например таких как "IE WebDeveloper" для Internet Explorer.
Браузер создаёт пустой текстовый узел, который, по сути, может являться переводом строки, пробелом или, например, табом. Все и эти перечисленные вещи превращаются в один единственный пробел и описывается следующей сущностью: . Так же следует учитывать, что, так как пробел — это обычный символ, то, соответственно, и изменяться этот самый символ будет в зависимости от размера или семейства шрифта, т.е, по сути, вести себя точно также, как и обычная буква в строке. Всё это обязательно следует учитывать при вёрстке.

.author-wrapper {
    font-size: 0;
    line-height: 0;
}
.sign-social,
.author-submit {
    font-size: normal;
    line-height: normal;
}

Пример решения

Answer 2

[Сергей Иванов]

спозиционировать абсолютно и выдать высоту 100% ?