Как сделать горизонтальную линию?

Горизонтальная линия делается с помощью свойства 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. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.

Вид линии, созданной через border-bottom