Question

我正在尝试创建一个将元素标记为“已修改”的CSS类。修改后的元素由页面左侧边缘的垂直线表示。

我正在使用:before伪元素，但由于我的元素没有位置相对，我似乎无法使它与父级匹配相同的高度。

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

我在这里做了一个快速的小提琴：https://jsfiddle.net/5k8ruahm/5/

我所问的可能只是使用CSS无法实现，但在使用JavaScript之前，我想我会问这里。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将您的父容器设置为position：relative，将：before设置为absolute。然后将定位应用于：在伪类之前。这应该为您提供所需的定位。

Answer 3

以下是您的解决方案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;
}

：在psuedo-element之前与非相对父级相同的高度

3 个答案: