пунктирная линия css рядом с div?

Question

Я хочу добиться этой пунктирной линии с чистым CSS

Мое решение - использовать псевдоэлемент: after для рисования пунктирной линии, есть ли другой способ добиться этого? без использования псевдоэлементов? Я хочу использовать один простой класс для достижения этой цели, ширина пунктирной линии может быть статической.

Answer 1

Для достижения этой цели можно использовать фоновую окраску:

.box {
  padding:5px; 
  border-right:100px solid transparent; /* The same as the width of the line */
  background:
    /*the borders*/
    linear-gradient(red,red) top   /100% 2px padding-box,
    linear-gradient(red,red) bottom/100% 2px padding-box,
    linear-gradient(red,red) left  /2px 100% padding-box,
    linear-gradient(red,red) right /2px 100% padding-box,
    /*the dashed line*/
    repeating-linear-gradient(to right,red 0px 3px,transparent 3px 5px) right center/100px 2px border-box;
  background-repeat:no-repeat;
  
  max-width:250px;
  margin:10px;
  display:inline-block;
}

<div class="box">
 Some text here
</div>
<br>
<div class="box">
 Some long long text here with some wrapping
</div>

Answer 2

Вы можете использовать тень. установить различные тени, перекрывающиеся и меняющие красный и белый.

.test {
    display: block;
    width: fit-content;
    border: solid 2px red;
    box-shadow: 15px 0px 0px -10px red,
                20px 0px 0px -10px white,
                25px 0px 0px -10px red,
                30px 0px 0px -10px white,
                35px 0px 0px -10px red,
                40px 0px 0px -10px white,
                45px 0px 0px -10px red,
                50px 0px 0px -10px white,
                55px 0px 0px -10px red,
                60px 0px 0px -10px white,
                65px 0px 0px -10px red,
                70px 0px 0px -10px white,
                75px 0px 0px -10px red;
}

<div class="test">
Whatever text
</div>