是否可以像我一样在水平线内制作文本？

Question

我不明白我做错了什么。我想让小文本看起来和大文本一样没有固定值(运行代码片段查看)

有办法做到这一点，不涉及文本被两个伪元素包围?

.ruler {
border-bottom: 1px solid black;
text-align: center;
height: 0px;
}
.text1 {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 12px;
}
.text2 {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
}

<div class="ruler">
<span class="text1">MyText</span>
</div>
<br />
<br />
<div class="ruler">
<span class="text2">MyText</span>
</div>

Answer 1

我很好奇你所说的I want the small text to look a like the big one without fixed values (run the snipped to see)是什么意思，我有一个使它们相同的例子。如果这不是你想要的，你能在下面提供一些澄清吗?可能你在原始问题中寻找的屏幕截图示例可能最有帮助。

.ruler {
border-bottom: 1px solid black;
text-align: center;
height: 0px;
}
.text {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
}

<div class="ruler">
<span class="text">MyText</span>
</div>
<br />
<div class="ruler">
<span class="text">MyText</span>
</div>

Answer 2

可以使用

::after or::before

.title {
width: 100%;
text-align: center;
position: relative;
}
.title::before {
content: '';
z-index: -1;
width: 100%;
height: 2px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

span.text2 {
font-size: 18px;
background: #fff;
}

<div class="title">
<span class="text2">MyText</span>
</div>

我用了:

:

之前

它是相对于有span的div来说的，我把它居中到top, left，然后变换属性会让它不管span的大小，它总是在中间

---

注意:这是一条穿过整个div的线，所以我给了span背景，这样它就可以覆盖它，并让你可以控制文本和

行的填充。

---

希望有用

Answer 3

很抱歉给你带来的困惑，我最终用另一种方法解决了这个问题。

我本想删除这个问题，并将这个答案添加到一个相关的问题中，但是我两者都不能做。

不管……下面是答案:

.ruler {
border-bottom: 1px solid black;
text-align: center;
}
.text1 {
background-color: white;
padding: 0px 2px;
transform: translateY(50%);
display: inline-block;
font-weight: 500;
font-size: 12px;
padding-top: 2px;
}
.text2 {
background-color: white;
padding: 0px 2px;
transform: translateY(50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
padding-top: 2px;
}

<div class="ruler">
<span class="text1">MyText</span>
</div>
<br />
<br />
<div class="ruler">
<span class="text2">MyText</span>
</div>

padding-top: 2px的作用与所有文本大小相同，因为它的存在是为了补偿边框大小。