Псевдоэлемент внутри ссылки

08.10.2014

Не могу решить задачу. Есть такая конструкция:

ul {
width: 200px;
}

a:before {
content: "icon";
width: 50px;
text-align: center;
background: #000;
color: #fff;
display: inline-block;
}

<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Нужно добавить иконку перед каждой ссылкой через псевдоэлемент так, чтобы иконка не обтекалась текстом ссылки (но была в то же время кликабельной). Пробовал махинации с inline-block, float - не получилось.

08.10.2014

ну думаю можно сделать padding для иконки, а потмо прописать картинку через background 😀

08.10.2014

Добавить красное?

09.10.2014

на самом деле за такое убить можно, но работает по идее...
a {position:relative; padding-left: 20px}
a:before {content:'';position:absolute; left: 2px; top: 50%; margin-top: -7px;}
top:50% чтоб иконка была по центру, а 7px это возвращение её на половину размера шрифта. рассчёт беру из того, что шрифт 14px.

я обычно использую для этого не шрифтовые иконки, а простые картинки (если нужен лёгкий вес и адаптивность - svg в base62). там можно поставить в фон и выровнять как надо.

10.10.2014

Рад бы через background, но проблема в том, что этих иконок штук 20 и для каждой нужен hover эффект. Разве что спрайтом накидать по-быстрому...
С другой стороны, через псевдоэлемент выводить - выходит много извращенского кода, зато без графики.

admiral, ты, наверное, имел в виду float: left и margin-right, а не наоборот. Но эффект тот же, как на нижнем примере, - иконка обтекается текстом ссылки.

10.10.2014

Да, ошибся, увидел картинку и что вижу, то и пишу)
Тогда наверное только или относительное/абсолютное позиционирование или спрайты

10.10.2014

Собственно, варианты:
1. создать общий класс для них типа glyphicon с абсолютным позиционированием. а для классов конкретных иконок менять только content. извращенский? да, но иконки бутстрапа или фон авесом не сильно отличаются подходом. это работает. а это по-прежнему главное.
2. можно картинками. тогда без псевдоэлементов. там можно спрайт использовать для уменьшения веса всех картинок.
3. можно использовать svg-спрайт, если иконки векторные. обращение по id внутри svg, а не по позиционированию на листе. вес будет примерно как у шрифта, управлять чуть сложнее, нужно ещё синтаксис svg знать. но svg - по сути не графика. про svg можно уже по-русски почитать. например, **********