Как сделать линию в html

 class="create-line">

.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before и :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 

Теперь рассмотрим стили.

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 50px; height: 1px; /* располагаем линию сверху от текста */ top: 15px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 50px; height: 1px; /* размещаем линию снизу и справа*/ bottom: 15px; right: 20px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

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

Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу . Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все , используем класс line , и уже для класса указываем свойство border-bottom . Сам остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.

Пример 1. Использование border-bottom

Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.

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

См. также

• border-bottom
• Оформление ссылок
• Точки между слов

HTML тег

HTML тег

(horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

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

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:

Разделительная линия:

Изменяем цвет линии:

Изменяем толщину линии:

Пунктирная линия html:

Атрибуты

HTML тег

поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Пример

HTML
 
HTML это язык разметки гипертекста.
 
CSS
 
CSS определяет то, как будут отображаться элементы.
 

Результат данного примера в окне браузера:

Woeusb kali linux как установить