Могу ли я изменить высоту строки содержимого, определенной внутри: after / before псевдоэлементов?

Question

Я использую: после псевдоэлемента, чтобы показать разделитель для заголовка карты, как показано ниже.

.lock-flag {
  font-size: 1em;
}

.lock-flag .lock-icon {
  margin-right: 0.5em;
}

.lock-flag .lock-icon:after {
  content: "-";
}

.lock-flag .lock-separator::after {
  content: "|";
  color: #666;
}

<div class="lock-flag">
  <span class="lock-icon"></span>
  <span class="lock-separator"></span>
</div>
<span class="title">Title</span>

Проблема заключается в том, что разделитель отображается правильно при нормальном размере, но при изменении размера экрана размер разделителя остается тем же, хотя размер контейнера (блокировка-разделитель) изменяется в зависимости отна размер экрана, как размер шрифта для тела меняется с помощью @media.

Подскажите, пожалуйста, как изменить размер разделителя.Является ли это правильным способом, чтобы разделитель располагался следующим образом?

РЕДАКТИРОВАТЬ: Согласно предложенному комментарию, изменил элемент с span на div для отображения блока.Проблема все та же.Как видно ниже, ожидается, что высота разделителя будет соответствовать значку замка.Высота сепаратора и контейнера варьируется согласно рисункам 2 и 3.

Answer 1

Мое предложение: используйте ::pseudo для элемента, размер которого варьируется.В этой демонстрации я решил изменить размеры .media (в вашем случае это был бы значок замка), которое влияет на ::after, но его можно переключить на ::before текста справа (позиционируется какleft: negative-value;).
Поскольку используется абсолютное позиционирование, необходимо убедиться, что между значком и текстом, где будет отображаться разделитель, достаточно места.

➡️ Codepen

.parent {
  display: inline-flex; /* or flex */
  justify-content: space-between;
  align-items: center; /* vertical aligning */
  height: 100%;
  outline: 1px dotted #aaa;
}

.media {
  position: relative;
  display: block;
  width: 2rem;
  height: 2rem;
  margin-right: 2rem;
  background-color: #0888;
}

.media::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.2rem;
  display: block;
  width: 1px;
  /* height: 100%; can replace t:0 b:0 */
  border-left: 1px solid #444;
}

.tall {
  width: 4rem;
  height: 4rem;
}

.title {
  margin: 0;
}

section {
  margin: 1rem;
}

section:not(:first-child) {
  margin-top: 1rem;
}

<section>
  <div class="parent">
    <span class="media"></span>
    <p class="title">Heading</p>
  </div>
</section>

<section>
  <div class="parent">
    <span class="media tall"></span>
    <p class="title">Heading</p>
  </div>
</section>