Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу <div>. Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все <div>, используем класс line, и уже для класса указываем свойство border-bottom. Сам <div> остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.
Пример 1. Использование border-bottom
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Линия</title> <style> .line { border-bottom: 1px solid #f00; /* Параметры линии */ } </style> </head> <body> <p>Текст до</p> <div class="line"></div> <p>Текст после</p> </body> </html>
Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.
Рис. 1. Вид линии, созданной через border-bottom
Автор: Влад Мержевич
Источник: webref.ru