javascript - 如何在相对于伪元素的位置添加文本？

Question

我正在尝试添加与 div 上的伪元素对齐的文本。作为引用，我说的是.div2::before在我的代码中，因为那是内圈和外圈之间的虚线。我想添加一个标有“壁厚”的标签，如下所示。文本应随圆圈大小调整，因为内/外圆圈大小将增加/减小，但文本位置应适应。实现这一目标的最佳方法是什么？
jsFiddle:https://jsfiddle.net/Kaevonz/cjpkxg6L/6/

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 60px;
  width: 150px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 340px;
  height: 340px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50% - 0.5px;
  width: 50%;
  height: 1px;
  border-top: 0.5px dashed black;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 150px;
  height: 50px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
  float: left;
}

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div5">
      </div>
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

Answer 1

我们需要彼此内部的两个元素。由于我们不能使用伪元素来做到这一点，我们需要在标记中添加一个元素。
新添加的元素将作为文本放置位置的引用，因此我们将其对齐方式与第一个伪元素完全相同。
最后，我们为文本使用子元素或最好是伪元素。
备注 :对于伪元素，可以通过属性添加文本。
演示

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 60px;
  width: 150px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 340px;
  height: 340px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50% - 0.5px;
  width: 50%;
  height: 1px;
  border-top: 0.5px dashed black;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 150px;
  height: 50px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
  float: left;
}


/* NEW */

.text {
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  width: 50%;
  transform: translateY(-50%) rotate(45deg) translateX(-20%);
  transform-origin: right center;
}

.text:before {
  content: 'WE HAVE TEXT, lots of it';
  transform: translateY(-50%) rotate(-135deg);
  position: absolute;
  right: 100%;
  writing-mode: vertical-rl;
  height: 100px;
  /* height as width */
}


/* Preview */

.div2 {
  animation: x 1s linear alternate infinite;
}

@keyframes x {
  from {
    height: 300px;
    width: 300px;
  }
  to {
    height: 450px;
    width: 450px;
  }
}

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="text"></div> <!-- NEW -->
    <div class="elem div3">
      <div class="elem div5">
      </div>
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

我不得不做一些文本对齐魔法，这可能是也可能不是最佳的，但在这一点上，我相信这个想法已经传递了。