如何在文本/标题旁边添加响应式垂直线

Question

基本上，留给我的唯一问题是自动调整假定标题旁边的行的高度。我用 div flex 包含了垂直线和标题，尽管我不确定结构本身是否正确或者是我的情况的理想解决方案。

这就是我所做的：

<div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

.post-title {
    font-weight: 700;
}

.vertical-line {
    height: (Main Issue Here);
    width: 10px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Answer 1

这个方法你试过吗？

.vertical-line { height: auto; /* Automatically adjusts to the height of its container */ width: 4px; /* Adjust the width as needed */ background-color: #007bff; margin-right: 1rem; align-self: stretch; /* Makes sure the line stretches to match the height of the container */ }