在线条中间画线[重复]

Posted 2023-03-05

【中文标题】在线条中间画线[重复]

【英文标题】：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

【参考方案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>