垂直标题离子左侧 CSS 问题

Question

我必须在框的两侧创建 2 个垂直标题。我已经在右侧成功创建，它可以很好地处理动态内容。 左侧出现问题。与右侧标题不同，当我们更改左侧的内容时，它会横向移动。此外，当我向其添加left: 0rem代码时，它不会移动到最左边。

小提琴链接

.section {
padding: 4.5rem 3rem;
font-size: 1.125rem;
}
.section .section-heading-vertical {
position: absolute;
right: 4rem;
top: 0;
font-size: 0.9375rem;
margin: 0;
z-index: 1;
letter-spacing: 0.4rem;
padding-right: 9.375rem;
-moz-transform-origin: right top 0;
-o-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-webkit-transform-origin: right top 0;
transform-origin: right top 0;
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.section .section-heading-vertical:before {
content: "";
width: 1px;
height: 8rem;
background-color: #333;
position: absolute;
top: 50%;
right: 8rem;
-moz-transform-origin: right top 0;
-o-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-webkit-transform-origin: right top 0;
transform-origin: right top 0;
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.section-heading-vertical.on-left {
left: 4rem;
right: inherit;
}

<div class="section">
<h3 class="section-heading-vertical on-left">Left Header</h3>
<h3 class="section-heading-vertical">Right Header</h3>
</div>

Answer 1

我使用writing-mode: tb-rl;和display: flex;进行了一些更改。请尝试下面的代码段。我希望这就是你要找的。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.section {
display: flex;
justify-content: space-between;
font-size: 1.125rem;
}
.section .section-heading-vertical {
display: flex;
align-items: center;
justify-content: flex-end;
top: 0;
font-size: 0.9375rem;
margin: 0;
letter-spacing: 0.4rem;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
.section .section-heading-vertical:after {
content: "";
width: 1px;
height: 8rem;
background-color: #333;
margin-top: 25px;
}
.section-heading-vertical.on-left {
left: 0rem;
}
.section-heading-vertical.on-right {
right: 0rem;
}

<div class="section">
<h3 class="section-heading-vertical on-left">Left Header</h3>
<h3 class="section-heading-vertical on-right">Right Header</h3>
</div>