:在伪元素与非相对父元素高度相同之前答案

【问题标题】：:Before psuedo-element same height as non-relative parent:在伪元素与非相对父元素高度相同之前
【发布时间】：2017-06-02 19:11:45
【问题描述】：

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

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

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

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

我要问的问题可能仅使用 CSS 无法实现，但在使用 JavaScript 之前，我想我会在这里问。

【问题讨论】：

提交了一个答案，但不确定这是否可行，因为您说要对齐的左侧填充/边距？您没有包含任何其他内容，所以我不确定它需要对齐什么。如果我的答案不起作用，请随时让我知道原因或提供更多背景信息，我会尝试提出另一个解决方案。如果您希望它与 jsfiddle.net/5k8ruahm/2 对齐，则添加另一段，但 position: absolute 似乎在这里也可以正常工作 jsfiddle.net/5k8ruahm/4
谢谢迈克尔。我原来的 Fiddle 没有说明问题，因为它太简单了。我添加了一个更真实的 HTML/CSS 版本并对其进行了更新：jsfiddle.net/5k8ruahm/5
您可以禁用figure.modified 的边距吗？ jsfiddle.net/5k8ruahm/6
即使我这样做了，从小提琴来看，红色标记仍然没有定位在内容 div 的左边距，这是它需要的位置。

标签： css css-position pseudo-element

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以将.modified 设为flex 父级，默认情况下它将拉伸每个子级（内容和: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>

【讨论】：

【解决方案3】：

将您的父容器设置为 position:relative 并将 :before 设置为 absolute。然后将定位应用到 :before 伪类。这应该可以为您提供所需的定位。

【讨论】：