ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

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

 

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

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 - не получилось.

Отредактировано Web3r - 08.10.2014
20089
Dimitry @Dimitry
ну думаю можно сделать padding для иконки, а потмо прописать картинку через background 😀

6600
Александр @admiral
Web3r пишет:

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

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

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

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

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

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

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

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