Точки между слов

В оглавлениях, справочниках, рецептах для наглядности и удобства разные части текста на одной строке соединяют пунктирной линией (рис. 1). Взгляд скользит по этой линии и не перескакивает на другую строку.

Точки между слов

Рис. 1. Точки между слов

Отдельные строки мы создаём через список и элементы <li>, внутрь которых вставляются левый и правый фрагменты строки. Чтобы стилизовать правую часть строки, поместим её в элемент <span>.

<li>Текст слева<span class="value">Текст справа</span></li>

Линия между частями текста создаётся с помощью свойства border-bottom, оно позволяет задать одновременно желаемую толщину, стиль и цвет линии. В итоге мы легко можем сделать линию пунктирной или сплошной, поменяв в стилях одно значение. Сама линия выводится с помощью псевдоэлемента li::before, как показано в примере 1.

Пример 1. Точки между слов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ингредиенты</title>
  <style>
   .ingredients {
    padding: 0; /* Убираем отступы */
   }
   .ingredients li {
    align-items: baseline; /* Выравниваем текст */
    display: flex; /* Включаем флексы */
    margin-bottom: 0.5em; /* Отступ снизу */
   }
   .ingredients li::before {
    content: ''; /* Выводим линию */
    border-bottom: 1px dashed #ccc; /* Параметры линии */
    flex-grow: 1; /* Линия занимает всё доступное пространство */
    order: 2; /* Выводим вторым */
    margin: 0 5px; /* Расстояние от текста */
   }
   .ingredients .value {
    order: 3; /* Выводим третьим */
   }
  </style>
 </head>
 <body>
  <ul class="ingredients">
   <li>Ликёр Калуа<span class="value">20 мл</span></li>
   <li>Ликёр Бейлис<span class="value">20 мл</span></li>
   <li>Ликёр Куантро<span class="value">20 мл</span></li>
  </ul>
 </body>
</html>

Браузер Internet Explorer не поддерживает свойство order, в нём данный пример работать не будет.