Как в bootscrap через before сделать картинку чтоб она не плавала от текста?

Question

[Павел]

https://codepen.io/mrusklon/pen/XRLzxB

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

Comments

[Дмитрий Локшин]

Не совсем понял, что значит "плавает"? Вы хотите, чтобы картинка располагалась непосредственно после текста, а не "разбрасывались" по разным сторонам?

[Павел]

joxi.ru/zANeV9osQ4bD29 и joxi.ru/RmzYkGMSq9X0rO . код один , а вот так картинка уезжает , то бишь уплыла

Answer 1

[Дмитрий Локшин]

Если я понял о чем идет речь, то так пойдет: https://jsfiddle.net/jn23yzk1/ ?

Comments

[Павел]

да это оно , здесь столько магии , даже не знаю с какого конца начать ее курить

[Дмитрий Локшин]

mrusklon: Ну отлично, рад что помог.

Answer 2

[Александр Лысенко]

Родитель:

position: relative; 
padding-right: 30px;
text-align: right;

:before

position: absolute;
right: 0;

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

Comments

[Павел]

joxi.ru/zANeV9osQ4bD29 и joxi.ru/RmzYkGMSq9X0rO . код один , а вот так картинка уезжает

[Павел]

а если без шрифта , о каких способах речь идет?

[Александр Лысенко]

mrusklon: У вас стоит text-align: right; естественно текст уезжает за правым краем блока. Картинка то в левом зафиксирована. Задайте фиксированную ширину блока или прижмите текст к левому краю.