Верстка, оформить нижнее подчеркивание между блоков

Question

Пробывал через after, before, подчеркивание уходит за текст.. Как на фото, фото тут вообще чтоб понять что мне нужно но покрасивей))))

Затем переделал на 3 блока span, вышло так, хелп)

.list_char__new{
  display: flex;
}
.underline_new{
    border-bottom: 0.5px dashed rgba(78, 76, 76, 0.9);
    width: 100%;
}

<div class="list_char__new">
  <span class="name_char__new">
    Минимальный диаметр бурения, mm
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>

Answer 1

Попробуйте такой вариант

.list_char__new {
  display: flex;
}

.underline_new {
  border-bottom: 0.5px dashed rgba(78, 76, 76, 0.9);
  flex-grow: 1; //добавим вместо width: 100%;
}

<div class="list_char__new">
  <span class="name_char__new">
    Минимальный диаметр бурения, mm
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>

P.S. flex-grow: 1; растянет точки на всё пустое оставшееся пространство

Answer 2

Уберите у .underline_new width: 100% и поставьте:

.underline_new {
  flex-grow: 1;
}

Можете еще немного правил добавить что бы смотрелось более ровно.

.list_char__new {
  display: flex;
  margin: 0 0 10px;
}
.underline_new {
  flex-grow: 1;
  border-bottom: 0.5px dashed rgba(78, 76, 76, 0.9);
  position: relative;
  top: -4px;
  margin: 0 4px;
}

<div class="list_char__new">
  <span class="name_char__new">
    Минимальный диаметр бурения, mm
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>
<div class="list_char__new">
  <span class="name_char__new">
    Минимальный
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>
<div class="list_char__new">
  <span class="name_char__new">
    Минимальный диаметр 
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>
<div class="list_char__new">
  <span class="name_char__new">
    Минимальный 
  </span>
  <span class="underline_new"></span>
  <span class="value_char_new">
    110
  </span>
</div>

https://jsfiddle.net/6x3zLfgj/1/

БЛОГ НА HUSL

Верстка, оформить нижнее подчеркивание между блоков

Ответы (2 шт):