I have to code that design. I don't know what to do with these dots. I am wondering if there is a better way to code this... it has to be responsive also (if the screen is smaller I want these dots to be below the div.box). Link to my codepen:

CodePudding user response：

Instead of using pseudo-elements, I would use additional divs between the main divs which have a dotted border-top, zero height, are positioned at the vertical middle of the main divs and are allowed to grow and shrink (other than the "main divs", which should have a fixed width).

For reponsiveness, I'd use a media query where beyon a certain width the flex-direction is column instead of the default row, and where the in-between divs have a dotted border-left instead of border-top, zero width and a flexible height including a min-height.

CodePudding user response：

Why not try with a simple @media query? Just modified your codepen a bit here.

@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%) ;
  }
}