Является ли это хорошей практикой?

Question

[Alekosh Akhosh]

Правильно ли я делаю?
По макету соответствует

.title h2 {
margin-bottom: 17px;
position: relative;
}

.title h2::after {
    content: '';
    position: absolute;
    background-image: url(../img/Vector.svg);
    background-repeat: no-repeat;
    top: -25px;
    margin-left: -8px;
    width: 48px;
    height: 48px;
    }

<div class="title center">
            <h2>Надёжность</h2>
        </div>

Comments

[Алекс Глебов]

Изменится заголовок и нужно будет и иконку менять. А как это сделать из разметки?

[Вадим]

при задании абсолютного позиционирования любому элементу стоит указывать 2 значения. Одно вертикальное, второе горизонтальное. То есть в любом сочетании top\bottom + left\right. Не всегда браузеры одинаково рендерят элемент, если указать только что-то одно.

В остальном - вполне ок.

[Ankhena]

В целом норм.
1. Зачем div? Он лишний, если вам не нужен ИЕ.
Класс переставить к заголовку, div убрать.
2. Проверьте отображение для многострочного заголовка.
Потому что результат применения гориз margin будет отличаться от задания через координаты left или right.

[Вадим]

Только не уверен нужен ли Вам тут вообще absolute?
transform: translate и иконка всегда будет после текста, какой бы длинны(строк) он не был, без необходимости задавать relative заголовку, без отрицательного марджина и тд.

[Ankhena]

Алекс Глебов,

Изменится заголовок и нужно будет и иконку менять. А как это сделать из разметки?

Например, через кастомные свойства.

Да и судя по картинке, при смене текста и иконки, изменится также и её положение.