CSS标题/标题右侧边框，带有框填充

Question

如何在没有任何额外的{div}的情况下使框的正确填充。标题:: after Selector应当赞叹该框的右侧填充。这是我的代码。该怎么做？

Quentin Veron给了我正确的解决方案。

.box {
  background: #f9f9f9;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.title {
  padding-left: 18px;
  border-left: 8px solid;
  border-color: #000;
  line-height: 30px;
  position: relative;
  overflow: hidden; // This is very important
}

.title:after {
  content: "";
  display: inline-block;
  border-top: 2px solid;
  border-color: #000;
  vertical-align: middle;
  width: 100%;
}

.title:after {
  margin-right: -100%;
  margin-left: 10px;
}

<div class="box">
  <h3 class="title">Title Right Border Line</h3>
</div>

Answer 1

这是您要寻找的吗？

.box {
  background: #f9f9f9;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.title {
  padding-left: 18px;
  border-left: 8px solid;
  border-color: #000;
  line-height: 30px;
  flex: 0 1 auto;
  margin: 0;
  padding-right: 12px;
}

.box::after {
  content: "";
  border-top: 2px solid;
  border-color: #000;
  flex: 1 0 auto;
}

<div class="box">
  <h3 class="title" style="">Title Right Border Line</h3>
</div>