-1

Появилась задача добавить разделитель между строками на всю ширину страницы.

Казалось бы, поставить <hr/> да и всё, но нюанс в том, что мои строки переносит браузер автоматически в зависимости от ширины окна (перенос по словам), и число строк и точные места их разделения заранее неизвестны. А разделить всё равно надо.

Как сделать такие разделители на чистых HTML и CSS?

Это не просто подчёркивание под словами, так что text-decoration здесь не подходит. (Хотя, если его реально адаптировать так, чтобы получить выглядящий как надо результат, я не против)

2
  • Пишу сей вопрос в надежде, что кто-нибудь предложит вариант лучше найденного мной)
    – andreymal
    21 ноя 2017 в 12:13
  • ассоциация: stackoverflow.com/questions/20916586/…
    – andreymal
    7 авг 2018 в 10:13

2 ответа 2

2

Можно через linear-gradient. Надо только подстроить под line-height. Вот пример под line-height: 16px.

div {
  background: -moz-linear-gradient(transparent 15px, red 1px);
  background: -webkit-linear-gradient(transparent 15px, red 1px);
  background: -o-linear-gradient(transparent 15px, red 1px);
  background: -ms-linear-gradient(transparent 15px, red 1px);
  background: linear-gradient(transparent 15px, red 1px);
  
  line-height: 16px; 
  background-size: 100% 16px;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

-1

Есть костыль: оборачиваем каждое слово в <span> и добавляем ему :after элемент с абсолютным позиционированием. Правда, в пределах одной строки будет получаться несколько (десятков) таких линий, но они будут накладываться друг на друга и выглядеть как одна линия. Однако это мешает использованию прозрачности, разрывов и прочих декоративных вещей, так что применимость этого варианта ограничена.

html, body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    font-family: 'PT Sans', Arial, sans-serif;
    font-size: 26px;
    text-align: center;
}

div {
    overflow: hidden;
    margin: 16px auto;
    width: 269px;
    background-color: white;
    line-height: 1.5;
    padding-bottom: 8px;
}

span {
    position: relative;
}

span:after {
    position: absolute;
    left: -2999px;
    right: -2999px;
    bottom: -4px;
    height: 1px;
    background-color: red;
    content: '';
}
<div><span>В </span><span>чащах </span><span>юга </span><span>жил </span><span>бы </span><span>цитрус? </span><span>Да, </span><span>но </span><span>фальшивый </span><span>экземпляр!</span></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.