Как сделать так, чтобы высота псевдоэлемента была как у его content, а не как у родительского блока и расположить его по центру

Question

<a>
  Hello
  <img src="a.svg">
</a>

a{
 display: flex;
 align-items: center;
}
a::before {
 content: url("a.svg");
}

Почему ::before все так же останется внизу и при этом у него высота равна высоте всего контейнера, а img будет по центру и его высота будет 2px как само изображение? Как расположить псведоэлемент так же и желательно без позиционирования?

Answer 1

Вот пример, я конечно рекомендовал бы сделать линии не по центру, а чуть ниже на 1-2px

.wrapper {
  display:flex;
  align-items: center;
  justify-content: center;
}

a{
  position: relative;
}

a::after,
a::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 1px;  
  top: 50%;
  background-color: red;
  transform: translateY(-50%);
}

a::after {  
  right: 0;
  transform: translateX(100%);
}

a::before {
  left: 0;
  transform: translateX(-100%);
}

<div class="wrapper">
<a>Hello</a>
<div>

БЛОГ НА HUSL

Как сделать так, чтобы высота псевдоэлемента была как у его content, а не как у родительского блока и расположить его по центру

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