Как сделать линии слежения у dl?

Question

[Андрей Еськов]

Уважаемые подскажите как сделать линии слежения между пунктами dt и dd, только так чтобы подчёркивания под словами не было, а было только под пустотой.

<dl class="row">
    <dt class="col-8 text-left">Наличие на складе</dt>
    <dd class="col-4 text-right">Есть</dd>

    <dt class="col-8 text-left">Наличие документов РСТ</dt>
    <dd class="col-4 text-right">Есть</dd>
</dl>

Что бы получилось как тут, только учитывая выравнивание текста. Возможно ли это при помощи before и after?

Прошу прощения забыл скрин прикрепить

Comments

[Eugene Chefranov]

Не совсем понятно, что такое "линия слежения", покажите пример

[Андрей Еськов]

Eugene Chefranov, Прошу прощения, забыл скрин прикрепить. Исправил.

[Andrej Sharapov]

Андрей Еськов, по-моему они просто сделаны точками вручную, не?

[Андрей Еськов]

Andrej Sharapov, Не не, точно нет, да и не суть как они сделаны, суть в том, как это сделать мне)

Answer 1

[Владимир Сартаков]

jsfiddle.net/quw59bzr/27

Comments

[Андрей Еськов]

Большое спасибо. Супер!

[Андрей Еськов]

Немного подправил. Так как у меня подключен bootstrap некоторые стили не понадобились. Ещё раз большое спасибо.

dl{
      padding: 0;
      margin:0;
      dt, dd {
        padding: 0;
        margin: 0;
      }
      dt {
        display: flex;
        &:after {
          content: "";
          flex: auto;
          margin: 0 0 0 .5rem;
          border-bottom: 1px dotted $gray-400;
        }
      }
      dd {
        text-align: right;
        display: flex;
        &:before {
          content: "";
          flex: auto;
          margin: 0 .5rem 0 0;
          border-bottom: 1px dotted $gray-400;
        }
      }
    }

[Владимир Сартаков]

На здоровье.
Только изолируйте как-нибудь стили, от других списков определений, например добавив класс product-params

Answer 2

[A K]

Вопрос задавался и неоднократно.
Как сверстать такой список?
Как сделать точки как в содержании?

Comments

[Андрей Еськов]

Спасибо, да я видел эти ответы, но суть вопроса чтобы сделать данный результат именно в той вёрстке которая в вопросе, а не в списке.

[A K]

Андрей Еськов, вы хотите чтоб мы для вас адаптировали уже готовое решение?

[Андрей Еськов]

Я бы хотел чтобы Вы не писали ответ на вопрос который я не задавал.