Отобразить значок из шрифта значка как псевдоэлемент в привязке с подчеркиванием

Question

Я хочу отобразить «внешний» значок на любых элементах привязки, которые имеют атрибут rel = «внешний». Я использовал изображение изначально, но это не очень хорошо масштабируется с размером шрифта, и я хочу свести к минимуму количество изображений, которые мы используем.

Мы используем font-awesome для других наших значков по всему сайту и обычно включаем их со специальным элементом значка с классом .fa- *. Однако для внешних ссылок я хотел бы просто настроить их с помощью CSS и применить значок с помощью: после псевдоселектора.

Это CSS, который у меня есть до сих пор, и это правильно отображается в iOS и Firefox, но в Chrome это пиксель или два, а подчеркивание от якоря заметно смещено. Я использовал значение CSS content с двумя пробелами перед его включением значка.

a[rel="external"]:after { 
    content: "\00a0\00a0\f08e"; 
    font-family: FontAwesome; 
    font-size: 0.7em; 
    line-height: 1; 
} 

Вот это jsfiddle показывает поведение: http://jsfiddle.net/hcharge/b9L3o5c5/2/

Кто-нибудь знает способ, чтобы получить это, чтобы показать последовательно во всех браузерах? Или я вынужден вернуться к использованию изображений?

Редактировать: Я должен был добавить, что использование нижней границы не является вариантом, поскольку оно не позволяет достаточно контролировать, как далеко находится граница от нижней части текста.

Answer 1

Довольно много, как только я разместил это, у меня была небольшая мозговая волна, и поскольку я ничего не нашел на этом, я отправлю ответ здесь.

Если использовать после того, как элемент, чтобы поставить некоторые дополнительные пробелы после текста:

a[rel="external"]:after { 
    content: '\00a0\00a0\00a0\00a0'; 
} 

И множество внешних ссылок будет положение относительно, я могу затем установить значок для отображения как: перед тем элементом и абсолютно поместите его вправо.

a[rel="external"] { 
    position: relative; 
} 

a[rel="external"]:before { 
    content: "\f08e"; 
    font-family: FontAwesome; 
    font-size: 0.7em; 
    position: absolute; 
    bottom: 2px; 
    right: 0; 
    text-decoration: none; 
} 

Вот скрипка ... http://jsfiddle.net/hcharge/b9L3o5c5

Answer 2

http://jsfiddle.net/b9L3o5c5/5/

html, body { 

     font-family: FontAwesome; 
     font-size: 19px; 
    } 

Вы должны использовать одни и те же шрифты для тела и иконки, и она работает.

Answer 3

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

a { 
    border-bottom: 1px solid; 
    text-decoration: none; 
} 

a[rel="external"]:after { 
    content: "\00a0\00a0\f08e"; 
    font-family: FontAwesome; 
    font-size: 0.7em; 
    line-height: 1; 
    padding-left: 1px; 
} 

JSFiddle

EDIT: В ответ на ваш комментарий, единственное, что я могу предложить сделать это with a background image. Эта идея была взята из here.

Answer 4

Чтобы получить право позиционирования, вы должны добавить все атрибутов, которые обычно предоставляются классом «.fa». «.fa» делает много вещей для позиционирования под капотом.

Если вы используете что-то вроде sass (или рамки типа compass/burbon), вы можете просто «@include .fa» в своей спецификации «a [rel =« external »]: after.