Разделение текста строкой в одном блоке с помощью css и html

Я пытаюсь провести линию между текстом с помощью css... но я не знаю, как это сделать.

Я использую бутстрап. Итак, у меня есть блок вроде

<div class = "row">
 <div class = "col-12">
 <span> HELLO ------------------- 6/04/2019  </span>
 <p> Some text </p>
 </div>
</div>

я бы хотел, чтобы все эти тире были строкой, разделяющей HELLO и дату...

Любая помощь?

html css

06.04.2019 22:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

198

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы также можете использовать flex-box для выравнивания элементов в одном родительском элементе. Я немного изменил вашу HTML-разметку, смотрите:

.flex-paragraph {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.line-separator {
  border-bottom: 1px dashed #000;
  flex: 1;
}

<div class = "row">
  <div class = "col-12">
    <p class = "flex-paragraph">
      <span>HELLO</span>
      <span class = "line-separator"></span>
      <span>6/04/2019</span>
    </p>
    <p> Some text </p>
  </div>
</div>

это работает, спасибо... но... как я могу нарисовать эту линию посередине?

— 06.04.2019 22:38

Просто меняем значение: align-items: flex-end; на align-items: center;

— 06.04.2019 22:39

06.04.2019 22:33