Question

我尝试在h4标题的底部添加一个带有一些额外css和自定义长度的边框。我知道与大多数浏览器兼容的唯一方法是使用::before规则。但是，我在代码上遇到以下问题：

<div class="my_div_class">
        <h4>This is a title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>


.my_div_class h4::before {
    position: absolute;
    margin: auto;
    z-index: 1;
    content: "";
    width: 75%;
    height: 2px;
    background: black;
    left: 12.5%;
    bottom: 0;
}

.my_div_class h4 {
    margin-bottom: 25px;
}

.my_div_class {
  width: 30%;
  height: 250px;
}

边框到达页面末尾（或在我的网站中，到较大的div元素的末尾），而不是h4的结尾。

这是jsfiddle。你几乎无法在页面底部看到它。

Answer 1

.my_div_class h4::before {
   position:absolute;
    margin: auto;
    z-index: 1;
    content: "";
    width: 75%;
    height: 2px;
    background: black;
    margin-top:1em;
    left: 12.5%;
}

发生了什么变化：

底部：0; ＆lt; ---已删除
边距：1em的; ＆lt; ---已添加

https://jsfiddle.net/550ttypa/3/

::在规则之前不遵循元素的大小

1 个答案: