你好，我有一些文本和一行，我需要在不重叠的情况下遍历文本。
这是目标:
这是我目前所拥有的:
出于某种原因，我无法让文本变得过于强大并将线条置于其后。我尽力自己解决，但我失败了，所以我决定求助于堆栈溢出。
这是 HTML:
<div class="section-3-left">
<div class="section-3-left-line"></div>
<div class="section-3-left-text">
<p>CASE RESULTS</p>
</div>
</div>
和CSS:
.section-3-left {
width: 100%;
height: 500px;
position: absolute;
}
.section-3-left-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 383px;
text-align: center;
}
.section-3-left-line {
position: absolute;
left: 0;
top: 250px;
height: 1px;
width: 102.8%;
background-color: #c61000;
}
这是 jsfiddle 链接:
任何帮助将不胜感激。谢谢!
最佳答案
<style>
.section-3-left {
width: 100%;
height: 500px;
position: absolute;
}
.section-3-left-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 383px;
text-align: center;
}
.section-3-left-line {
position: absolute;
left: 0;
top: 250px;
height: 1px;
padding-right: 40%;
background-color: #c61000;
}
.section-3-right-line {
position: absolute;
right: 0;
top: 250px;
height: 1px;
padding-left: 40%;
background-color: #c61000;
}
</style>
<body>
<div class="section-3-left">
<div class="section-3-left-line"></div>
<div class="section-3-right-line"></div>
<div class="section-3-left-text">
<p>CASE RESULTS</p>
</div>关于html - 将文本放在行 div 的前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43026248/