我正在try 添加与div上的伪元素对齐的文本.作为参考,我在代码中使用的是.div2::before,因为它是内圈和外圈之间的虚线.我想添加一个标签,上面写着"墙厚",如下所示.文本应随圆圈大小进行调整,因为内/外圆圈大小将增加/减小,但文本位置应进行调整.实现这一目标的最佳方式是什么?

JsFdle:https://jsfiddle.net/Kaevonz/cjpkxg6L/6/

enter image description here

.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>

推荐答案

我们彼此之间需要两个元素.因为我们不能使用伪元素做到这一点,所以我们需要在标记中添加一个元素.

新添加的元素将用作文本放置位置的引用,因此我们对齐它的方式与第一个伪元素完全相同.

最后,我们使用子元素,或者最好是文本的伪元素.

100: for pseudo elements, text can be added via attributes.

DEMO

.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>


我不得不做一些文本对齐魔术,这可能是最优的,也可能不是最优的,但在这一点上,我相信这个 idea 已经被传递了.

Javascript相关问答推荐

如何从HTML对话框中检索单选项组的值?

rxjs插入延迟数据

React.Development.js和未捕获的ReferenceError:未定义useState

DOM不自动更新,尽管运行倒计时TS,JS

<;img>;标记无法呈现图像

Reaction-SWR-无更新组件

MongoDB受困于太多的数据

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

如何用javascript更改元素的宽度和高度?

为列表中的项目设置动画

使用Reaction窗体挂钩注册日历组件

如何使用puppeteer操作所有选项

限制数组中每个元素的长度,

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题

是否在图表中计算线上的点坐标?

如何解析/data/build中的Angularnode_modules/chart.js/dist/Chart.js?

Chart.js根据 Select 显示数据

如何改变Extra Reducers内部另一个减速器的状态?

导航栏中显示项目的方式有问题

基于单击按钮更改椭圆的填充/取消填充状态,同时跟踪用户是否 Select 另一种 colored颜色