Как убрать border-bottom с иконки?

Question

[search74]

Использую font awesome и добавляю перед текстом иконку через :before. Проблема в том что не получается убрать подчеркивание с иконки.
jsfiddle

Answer 1

[Вадим Белкин]

почему в вашем случае не сделать иконку через :before у ссылки а подчеркивание оставить через span? но лучще вынести иконку в отдельный тег.

Comments

[search74]

Сделал так jsfiddle.net/sqd2e9jm/14
А почему лучше иконку в отдельный тег? Я сейчас на многих сайтах наблюдаю что используют :before и :after гденипопадя, вот и задался вопросом...

[Вадим Белкин]

Иконка это по сути элемент, независимый, подобно картинке img. Вынося в отдельный тег вам будет проще с ним работать. А через :before, :after используют иконочные шрифты, где какие-то стандартные символы заменены на иконки, а в параметре content: "" задают как раз этот символ. Можете посмотреть у любых популярных фреймвокров типа bootstrap, foundation - иконки добавляют отдельными элементами, использую псевдоэлементы ;before/:after (в основном :before)

[search74]

Вадим Белкин: Спасибо за пояснение. Но разве в моем случае не иконочный шрифт?

[Вадим Белкин]

Иконочный, просто подробнее описал почему через before делают и отдельным элементом.

Answer 2

[Алексей]

Почему бы не сделать иконку отдельным span элементом без нижней границы?

Comments

[search74]

Получше решение в ссылку иконку сделать

Answer 3

[keslo]

А чем не устраивает использование тега i? Или вы принципиально минимизирует код HTML в пользу CSS?

Answer 4

[Андрей]

если не хочется использовать <i class="fa fa-key"></i>
то можно вот так:
jsfiddle.net/sqd2e9jm/16