html - 用作行的 div 旁边的文本

Question

我有以下 HTML 和 CSS，用于开头带有圆圈的行。

这个圆圈用作图像的信息 - 它指向它 - 因此我需要在该行的末尾添加一些文本。大致是这样的:

------------ 文本

我该如何实现？

.circle {
  display: inline-block;
  vertical-align: center;
  width: 20px;
  height: 20px;
  background-color: #D3072A;
  border: solid 1px #D3072A;
  border-radius: 50%;
  position: absolute;
  top: -9px;
  left: -1px;
}

.markers {
  top: 10%;
  left: 5%;
  width: 500px;
  height: 3px;
  background-color: #D3072A;
  position: absolute;
}

<div class="markers">
   <div class="circle">
   </div>
</div>

Answer 1

你可以通过使用 :after 选择器来实现:

示例:

.circle {
  display: inline-block;
  vertical-align: center;
  width: 20px;
  height: 20px;
  background-color: #D3072A;
  border: solid 1px #D3072A;
  border-radius: 50%;
  position: absolute;
  top: -9px;
  left: -1px;
}

.markers {
  top: 10%;
  left: 5%;
  width: 200px;
  height: 3px;
  background-color: #D3072A;
  position: absolute;
}
.markers::after {
  width:100%;
  content:"Text"; /*Text here*/
  position:absolute;
  right:-100%;
  top:-9px;
}

<div class="markers">
   <div class="circle">
   </div>
</div>

我希望这能奏效。