将文本放在css水平条形图之前和之后

.bar {
  position: relative;
}

.bar::before,
.bar::after {
  content: "文本内容";
  position: absolute;
}

.bar::before {
  left: 0;
}

.bar::after {
  right: 0;
}

<div class="bar">
  <span class="before-text">文本内容</span>
  <!-- 条形图 -->
  <span class="after-text">文本内容</span>
</div>

.bar {
  position: relative;
}

.before-text {
  position: absolute;
  left: 0;
}

.after-text {
  position: absolute;
  right: 0;
}