在线条中间画线[重复]答案

【问题标题】：Draw Line in the middle of the line [duplicate]在线条中间画线[重复]
【发布时间】：2021-05-17 16:33:40
【问题描述】：

我想知道如何使用 CSS(3)（如果需要，使用 javascript）来实现这个图像。

有什么想法吗？

【问题讨论】：

这能回答你的问题吗？ Add centered text to the middle of a <hr/>-like line

标签： javascript html css

【解决方案1】：

有很多方法可以做到这一点 - 但由于您的线条高度超过 1 个像素，并且两端都有圆形末端 - 我会将其命名为 ::before and ::after pseudo-elements 并带有居中文本。

请注意，当使用 position:absolute 定位元素时 - 您需要将 position: relative 应用于父元素。 Aslo - 您需要将线伪元素偏移其高度的一半 - 以便将它们垂直居中。

.wrapper {
 text-align: center;
 position: relative;
}

span {
  display: inline-block;
  width: 10%;
  font-size: 20px;
  font-weight: bold
}

.wrapper::before,
.wrapper::after {
  content: ' ';
  display: block;
  position: absolute;
  top: calc(50% - 3px);
  width: 45%;
  background: black;
  border-radius: 6px;
  height: 6px;
}

.wrapper::after {
 right: 0;
}

<div class="wrapper">
  <span>Hi!</span>
</div>

【讨论】：