Правильный способ позиционирования: перед псевдоэлементами

Каков правильный способ размещения псевдо-элементов :before и :after, например изображений? Я возился с кучей разных способов, но ни один из них не кажется очень элегантным решением.

Это то, что я пытаюсь сделать:

Это то, что я сделал:

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, и это должно быть то, что вы делаете. Но почему-то это не работает для меня. Я могу добавить горизонтальные отступы и поля, но верхнее и нижнее отступы ничего не делают. Почему это произойдет?

Ответ 1

Попробуйте использовать background вместо content и поместите заполнитель в content: http://jsfiddle.net/7X7x2/1/

Ответ 2

Если вы хотите разместить только изображение рядом с текстом, вам, вероятно, понадобится свойство vertical -align:

div.read-more a:before {
    vertical-align: bottom;
    content: url(image.png);
}

Он имеет следующие возможные значения: базовый, вспомогательный, супер, верхний, текстовый, средний, нижний, текстовый

Это значение a рассчитывается из позиции текста из текущей текстовой строки (Подробнее см. в примере).

Полная ссылка: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(Чтобы добавить пробел перед текстом, просто используйте margin-right)

Ответ 3

Вы можете использовать следующий код для перемещения содержимого:

div.read-more a:before {
  content: "\00BB \0020";
  position: relative;
  top: -2px;
}

Ответ 4

Это было мое решение с помощью мыши:

div.read-more a:before {
    content: url(image.png);
    position: relative;
    top: 3px;
    left: -7px;
    padding-left: 7px;
}
div.read-more a:hover:before {
    content: url(image_hover.png);
}

Ответ 5

Вам нужно сделать позицию: относительно .read-more, а затем вы можете изменить положение.

Ответ 6

Отредактировано скрипт @Richard JP Le Guen, чтобы он немного соответствовал запрошенной версии

HTML

<div class="read-more">
    <a href="#">Read More</a>
</div>

CSS

div.read-more a:before {
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
    content:"";
    width:21px;
    height:21px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 4px;
    line-height: 21px;
}
div.read-more {
    background: red;
    line-height: 21px;
    display:block;
    vertical-align:middle;
    width: max-content;
    padding: 4px;
}
div.read-more a{
    color: white;
    text-decoration:none;
}

http://jsfiddle.net/7X7x2/688/