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

这是您的解决方案 https://jsfiddle.net/5k8ruahm/3/

父位置更改为相对位置，因此您可以将 top:0; 和 bottom:0; 定义到 :before 元素

   .content
{
  padding-left: 50px;
  position: relative;
}

.modified:before
{
  content: "\a0";
  border-left: 3px solid #f00;
  left: 0;
  position: absolute;
  bottom:0;
  top: 0;
}