：在与非相对父代相同的高度之前

我正在尝试创建一个CSS元素，将元素标记为“已修改”。修改过的元素在页面主体的左侧页边空白处用垂直线表示。：在与非相对父代相同的高度之前

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

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

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

我问大概什么不能只是使用CSS，但诉诸的JavaScript之前，我想我会问这里得以实现。

2017-06-02 David James Ball

提交一个答案，但不知道是否会因为左的工作填充/边际你说你想对齐？您没有包含任何其他内容，因此我不确定需要遵循的内容。如果我的回答不起作用，请随时告诉我为什么或给出更多的上下文，我会尝试提出另一种解决方案。如果这就是你希望它与https://jsfiddle.net/5k8ruahm/2/一致的地方，添加另一段，但是'position：absolute'在这里似乎也能正常工作https://jsfiddle.net/5k8ruahm/4/ –

谢谢迈克尔。我原来的小提琴没有说明问题，因为它太简单了。我已经添加了一个更现实的HTML/CSS版本并更新了它：https：//jsfiddle.net/5k8ruahm/5/ –

您是否可以禁用'figure.modified'上的边距？ https://jsfiddle.net/5k8ruahm/6/ –

您可以制作.modified a 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>

来源

2017-06-02 19:14:20

设置你的父容器的位置：相对和：以前一样绝对的。然后将该定位应用于：伪类之前。这应该授予您您正在寻找的定位。

来源

2017-06-02 19:15:40 Korgrue

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

来源

2017-06-02 19:18:39

：在与非相对父代相同的高度之前

回答

相关问题