css - :Before psuedo-element same height as non-relative parent

Question

我正在尝试创建一个 CSS 类，将元素标记为“已修改”。修改的元素由页面主体左侧边距中的垂直线指示。

我正在使用 :before 伪元素，但是因为我的元素没有相对位置，所以我似乎无法让它与父元素匹配相同的高度。

添加 position:relative 将允许我匹配高度，但不会将标记相对于左侧对齐，因为该元素可能具有填充/边距，这意味着左边距未与左侧对齐 body 。

我在这里做了一个快速的 fiddle :https://jsfiddle.net/5k8ruahm/5/

我所问的问题可能无法仅使用 CSS 来实现，但在求助于 JavaScript 之前，我想我应该在这里问。

Answer 1

您可以将 .modified 设为 flex 父级，它将拉伸(stretch)每个子级(内容和 :before)以匹配高度默认情况下是父级的。然后使用 translateX() 将线移动到父级旁边。

.content {
  padding-left: 50px;
}

.modified {
  display: flex;
}

.modified:before {
  content: "\a0";
  border-left: 3px solid #f00;
  transform: translateX(-1em);
}

<div class="content">
  <p class="modified">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum ac nisl commodo dapibus posuere sit amet lorem. Sed pulvinar dui purus, sed sollicitudin tortor efficitur eget. Maecenas et tempus tortor, ut maximus nunc. Proin pretium varius
    consectetur. Quisque dignissim eros nec odio ornare interdum. Praesent quis dui eget libero tempus venenatis vitae eu massa. Ut orci neque, sodales in nisi quis, pretium ultrices risus.
  </p>
</div>