html - 带有 CSS 的可调整水平线。

Question

我想知道如何用CSS实现可调整的水平线。

HTML

<div class="col-12 d-flex justify-content-around title">
    <span style=" flex-shrink: 3;"  class="align-self-center"></span>
    <h5> content here </h5>
    <span style=" flex-shrink: 3;" class="align-self-center"></span>
</div>  

CSS

.title span {
    height: 1px;
    background: rgba(255,255,255,0.3);
    width: 33%;
}

当内容很短的时候，看起来很完美。

但是，如果内容太长。它会像这样困惑。有什么方法可以用 CSS 制作可调整的线条？

谢谢

Answer 1

这是一种使用 flexbox 和伪类的简单方法 - 没有技巧，容器内只有一个元素。

div {
  display: flex;
  align-items: center; /* vertically center lines */
}

div::before,
div::after {
  content: '';
  flex: 1; /* expand lines as much as possible */
  background: #ccc;
  height: 2px;
}

span {
  padding: 0 1em; /* slight padding between line and text */
}

<div>
  <span>Text of any size</span>
</div>