Stretch divider to one side but keep title centered - html

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

First, I would use flexbox instead of table layout then adjust the margin/padding:
Kept only the relevant code for the demo
#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>
With your original code you can try this:
#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>

Answer 2

#container {
height: 100px;
width: 400px;
background: #EFEFEF;
padding: 24px;
}
.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;
width: 100%; /* SOLUTION – this is new */
}
.divider::before, .divider::after {
position: absolute; /* SOLUTION – this has changed */
top: 50%;
display: table-cell;
width: 41%; /* SOLUTION – changed, matches desired layout best */
border-top: 1px solid #AAA;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
content: '';
}
.divider::before{
left: -24px; /* SOLUTION – compensate #container padding */
width: calc( 41% + 24px ); /* SOLUTION – add the offset to the width */
}
.divider::after{
right: 0px; /* SOLUTION */
}
.divider-text {
display: inline-block;
padding: 0 24px;
}
<div id="container">
<div class="divider">
<span class="divider-text">Title</span>
</div>
</div>

Answer 3

.divider.stretched-left {
left: -24px;
width: calc(100% + 48px);
min-width: calc(100% + 48px);
}
Just You have to replace last css lines code with above given code.

Answer 4

Solution with minimum CSS, without flex, without transform.
.divider {
position: relative;
text-align:center;
}
.divider:before {
content:'';
position: absolute;
top:50%;
height: 1px;
width: 100%;
background: #000;
left: 0;
z-index: -1;
}
.divider span{
padding: 0 24px;
z-index: 1;
background: #fff;
display: inline-block;
}
<div class="divider">
<span>Title</span>
</div>