Как svg картинку прикрепить к title, с помощью псевдоэлементов?

Question

 Проблема заключается в том что, мои псевдоэлементы при указание left или right, позиционируют себя относительно всей ширины, и поэтому чтобы они находились возле заглавья, нужно использовать большие отступы, а при адаптиве ширина блока уменьшается.... и псевдоэлементы съежают в сторону

Вот как это должно выглядеть

## HTML
<div class="akva__container">
<div class="akva__img">
<div class="akva__overtitle title-h3">Укрепление здоровья</div>
</div>
</div>
----------

## SCSS ##

.akva__container {
  max-width: 1296px;
  margin: 0 auto;
}
.akva__img{
  background-image:url("/img/header/bg.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-position: right;
}
.akva__overtitle {
  text-align: center;
  padding-top: 136px;
  position: relative;
  &::before{
    content: " ";
    position: absolute;
    left: 10px;
    width: 28px;
    height: 14px;
    background-image: url("/img/main/lemon.svg");
  }
  &::after{
    content: " ";
    position: absolute;
    width: 28px;
    height: 14px;
    background-image: url("/img/main/lemon1.svg");
    transform: matrix(-1, 0, 0, 1, 0, 0);
  }
}

Answer 1

Не нужно манипуляций с position, достаточно выровнять элементы с помощью display: flex :

.akva__container {
  margin: 0 auto;
  max-width: 1296px;
}
.akva__img {
  width: 100%; height: 600px;
  background-image: linear-gradient(#acd6, #acd6), url('https://gorodprima.ru/wp-content/uploads/2021/07/bassejn1.jpg');
  background-position: right;
  background-repeat: no-repeat;
}
.akva__overtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding-top: 136px;
}
.akva__overtitle::before,
.akva__overtitle::after {
  content: '';
  height: 14px; width: 28px;
  background-image: url('https://svg-clipart.com/svg/black/eg0OKsj-leaf-vector.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.akva__overtitle::after {
  transform: scaleX(-1);
}

<div class="akva__container">
  <div class="akva__img">
    <div class="akva__overtitle title-h3">Укрепление здоровья</div>
  </div>
</div>

БЛОГ НА HUSL

Как svg картинку прикрепить к title, с помощью псевдоэлементов?

Ответы (1 шт):