用::之后创建点并使其响应迅速

Question

我必须编码该设计。我不知道该如何处理这些点。 我想知道是否有更好的编码方法...它也必须响应迅速（如果屏幕较小，我希望这些点在Div.box下方）。链接到我的codepen： https://codepen.io/confuze/confuze/pen/pen/pen/joygqko

.box:not(:last-child)::after {
  content: "..............";
  color:#8C4AF2;
  font-size: 2rem;
  position: absolute;
  left: calc(100% + 10rem);
  top: 50%;
  transform: translate(-50%, -70%);
}

href =“ https://i.sstatic.net/eyzvj.png” rel =“ nofollow noreferrer”>

Answer 1

我将不用使用伪元素，而是在主divs之间使用其他divs，该divs具有点缀 border> border-top ，零高度，位于主的垂直中间divs并被允许生长和收缩（除了“主divs”，其宽度应具有固定宽度），包括最小和最大宽度。

为了响应能力，我将使用一个媒体查询，其中 flex方向 is 列而不是默认 row> row ，其中内部的divs有一个虚线边界左而不是 border-top ，零 width 和一个灵活的高度，包括 min -height 和 Max-Height 。

在评论后添加：

body {
  background-color: #0B021F;
}
.container {
  display:flex;
  justify-content: center;
  align-items:center;
  margin-top:5em;
  flex-wrap:wrap;
  gap: 2rem;
}

.box {
  background-color:white;
  width:6rem;
  height:6rem;
  border-radius:1rem;
  position: relative;
}

.dots {
  height:0;
  min-width:3rem;
  max-width: 10rem;
  border-top:5px dotted #8c4af2;
  flex: 1 1 auto;
}

@media only screen and (max-width:700px) {
  .container {
    flex-direction:column;
  }
  
  .dots {
    border-top:0;
    border-right:5px dotted #8c4af2;
    min-height:6rem;
    min-width:0;
  }
}

<div class="container">
  <div class="box"></div>
  <div class="dots"></div>
  <div class="box"></div>
  <div class="dots"></div>
  <div class="box"></div>
</div>

Answer 2

为什么不尝试简单的@Media查询？刚刚修改了您的codepen 在这里。

@media screen and (max-width: 945px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    flex-wrap: wrap;
    gap: 15rem;
    flex-direction: column;
  }

  .box:not(:last-child)::after {
    content: "..............";
    color: #8c4af2;
    font-size: 2rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: rotate(90deg) translate(90%, 125%)  ;
    color: red;
    
  }
}

@media screen and (min-width: 945px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    flex-wrap: wrap;
    gap: 20rem;
    flex-direction: row;
  }
  .box:not(:last-child)::after {
    content: "..............";
    color: #8c4af2;
    font-size: 2rem;
    position: absolute;
    left: calc(100% + 10rem);
    top: 50%;
    transform: translate(-50%, -70%) ;
  }
}