Stretch divider to one side but keep title centered

Question

Please run the example below. I'm trying to stretch the left line further to the left to compensate the parent's padding as you can see in the second example, while keeping the title centered relative to the parent like in the first example. I can't seem to have both.

(For anyone who's familiar, the divider I'm trying to tweak comes from ant-design)

#container {
  height: 100px;
  width: 400px;
  background: #EFEFEF;
  padding: 24px;
}

/* Normal use case */

.divider {
  position: relative;
  line-height: 23px;
  height: 1px;
  display: table;
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  text-align: center;
  background: transparent;
}

.divider::before, .divider::after {
  position: relative;
  top: 50%;
  display: table-cell;
  width: 50%;
  border-top: 1px solid #AAA;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  content: '';
}

.divider-text {
  display: inline-block;
  padding: 0 24px;
}

/* Trying to stretch the left line to further to the left without puting the title off-center */

.divider.stretched-left {
  left: -24px;
  width: calc(100% + 24px);
  min-width: calc(100% + 24px);
}

<div id="container">
  <div class="divider">
    <span class="divider-text">Title</span>
  </div>
  <div class="divider stretched-left">
    <span class="divider-text">Title</span>
  </div>
</div>

Answer 1

首先，我将使用flexbox而不是表格布局，然后调整边距/填充：

^{仅保留演示的相关代码}

#container {
  width: 400px;
  background: #EFEFEF;
  padding: 24px;
}

/* Normal use case */
.divider {
  display: flex;
  margin: 16px 0;
  align-items:center;
}

.divider::before, .divider::after {
  flex:1;
  height: 1px; 
  background:#AAA;
  content: '';
}
.divider::before {
  margin-right:24px;
}
.divider::after {
  margin-left:24px;
}

.divider.stretched-left:before {
  margin-left:-24px;   
  padding-left: 24px;
}

.divider.stretched-right:after {
  margin-right:-24px;   
  padding-right: 24px;
}

<div id="container">
  <div class="divider">
    <span class="divider-text">Title</span>
  </div>
  <div class="divider stretched-left">
    <span class="divider-text">another Title</span>
  </div>
  <div class="divider stretched-right">
    <span class="divider-text">Title</span>
  </div>
  <div class="divider stretched-right">
    <span class="divider-text">another Title</span>
  </div>
  <div class="divider stretched-left stretched-right">
    <span class="divider-text">another Title</span>
  </div>
</div>

使用原始代码，您可以尝试以下操作：

#container {
  height: 100px;
  width: 400px;
  background: #EFEFEF;
  padding: 24px;
}

/* Normal use case */

.divider {
  position: relative;
  line-height: 23px;
  height: 1px;
  display: table;
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  text-align: center;
  background: transparent;
}

.divider::before, .divider::after {
  position: relative;
  top: 50%;
  display: table-cell;
  width: 50%;
  border-top: 1px solid #AAA;
  transform: translateY(50%);
  content: '';
}


.divider-text {
  display: inline-block;
  padding: 0 24px;
}

/* Trying to stretch the left line to further to the left without puting the title off-center */

.divider.stretched-left {
  left: -24px;
  width: calc(100% + 48px); /* Updated */
}
/* Added */
.divider.stretched-left:after {
  border-image:linear-gradient(to left,transparent 24px, #aaa 24px) 1;
}

<div id="container">
  <div class="divider">
    <span class="divider-text">Title</span>
  </div>
  <div class="divider stretched-left">
    <span class="divider-text">Title</span>
  </div>
</div>