html - 我可以更改在 :after/before 伪元素中定义的内容字符串的高度吗？

Question

我正在使用 :after 伪元素来显示如下卡片标题的分隔符。

.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>

问题是分隔符以正常大小正确显示，但是当屏幕调整大小时，分隔符大小保持不变，尽管容器大小（锁定分隔符）根据屏幕大小而变化，因为 body 的字体大小正在通过 @media 更改。

请建议如何调整分隔符大小。这是像这样放置分隔符的正确方法吗？

编辑：根据建议的评论，将元素从 span 更改为 div 以进行块显示。问题还是一样的。如下所示，期望是将分隔符的高度与锁定图标相匹配。分离器和容器的高度根据图片 2 和 3 变化。

标签： htmlcsssass

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>