Правильный способ позиционирования: до псевдоэлементов
Как правильно разместить : до и : после псевдоэлементов, например изображений? Я возился с кучей разных способов, но ни один из них не кажется очень элегантным решением.
Это то, что я пытаюсь сделать:
Вот что я сделал:
div.read-more a:before {
content: url('/images/read_more_arrow_sm.png');
position: absolute;
top: 4px;
left: -15px;
}
<div class="read-more">
<a href="#">Read More</a>
</div>
Я просто хочу, чтобы изображение было выровнено с текстом. Есть ли другой способ сделать это?
Было бы идеально, если бы я мог просто использовать отступы и поля на изображении : before , а это , как предполагается, , то, что вы делаете . Но по какой-то причине у меня это не сработало. Я могу добавить горизонтальный отступ и поля, но верхний и нижний отступы ничего не делают. Почему так могло случиться?
2 ответа
Если вы хотите расположить изображение рядом с текстом, вам, вероятно, понадобится свойство вертикального выравнивания:
div.read-more a:before {
vertical-align: bottom;
content: url(image.png);
}
У него есть следующие возможные значения: baseline, sub, super, top, text -top, middle, bottom, text-bottom
Это значение рассчитывается исходя из позиции текста из текущей текстовой строки (подробнее в примере).
Полная ссылка: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
(Чтобы добавить пробел перед текстом, просто используйте поля справа)
Вам нужно сделать позицию: относительно .read-more, и тогда вы сможете изменить позицию.