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

Содержание

как сделать линию короче бокса – Zencoder

При верстке макета сайта, кстати, совсем несложного, возник вопрос.

Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.

Проблемы с созданием таких линий, в принципе, нет никакой. Их можно легко создать с помощью стилевого правила

1	border-bottom

1
border-right

. Или же с помощью правил

1
border-right

и элемента

.
Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что 
1
 border
 должен быть короче, чем бокс:
Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.
В данном случае можно выйти из положения с помощью псевдокласса 
1
:after
. Для наглядности представим такой пример.
Создаем слой с контентом:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
 И пропишем для него стилевые правила:
div {
  width: 300px;
  position: relative;
}
Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позициоирование. Затем для созданного нами бокса создаем псевдокласс 
1
:after
 и прописываем для него свойства:
div:after {
  content: "";
  position: absolute;
  top: 30px;
  right: -10px;
  bottom: 30px;
  border-left: 1px solid #000;
}
 Немного распишем, что да как в этом коде.
Внутри простого блока после его содержимого создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты  и 
1
bottom
 (благодаря двум последним он растягивается, так как создаются верхняя и нижняя координата для границы) и для этого блока создается только левая граница 1
border-left
 со свойствами: 1
1px сплошного черного цвета
.
На этом все.
cssКрасивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:{% highlight typescript %}public trackByNumber = (_:…… Continue reading
ESLint: TypeError: this.libOptions.parse is not a function
 Published on September 13, 2022
  Ubuntu — проблема с KVM Switch
 Published on September 12, 2022Как сделать заголовок с линиями по бокам от текста с помощью CSS
Главная » Html и Css
Периодически бывает нужно сделать заголовок с горизонтальными линиями по бокам от текста. Если попробовать сделать это, казалось бы, самым простым способом: создать у заголовка свойство css before (или after) с границей, которая служит линией и которую мы поднимаем на нужный уровень, то столкнемся с проблемами, которые не хочу здесь расписывать. Но нормально сделать таким способом не получается.
Поиск по интернет дает готовые приемы решения этого вопроса, которыми и хочу здесь поделиться.
Для заголовка используется тег div с классом .title и псевдоэлементы :before и :after. В div пишем нужный текст, а псевдоэлементы станут линиями по краям: :before — слева, а :after — справа.
 <div>Текст</div>
 <div>Текст</div>
Код css:
 .title {
 /* Прячем часть линий, выходящие за пределы блока */
 overflow: hidden;
 /* Выравниваем заголовок по центру, можно указать left, right для выравнивания влево или вправо */
 text-align: center;
 /* Размер заголовка */
 font-size: 25px;
}
.title:before,
.title:after {
 /* Свойство content необходимо указывать хотя бы пустое, иначе псевдоэлементы не отобразятся */
 content: «»;
 /* Свойства линий, выравнивание по центру по вертикали */
 display: inline-block;
 vertical-align: middle;
 /* Ширина — 100% и указываем толщину линии */
 width: 100%;
 height: 2px;
 /* Цвет линии */
 background-color: #f4801a;
 /* Возможность для пседоэлементов изменить позицию линии */
 position: relative;
}
.
  title:before {
 /* Ставим левую линию слева от текста, смещая ее на 100% влево */
 margin-left: -100%;
 /* Отступ линии от заголовка */
 left: -14px;
}
.title:after {
 /* Ставим правую линию справа от текста, смещая ее на 100% вправо */
 margin-right: -100%;
 /* Отступ линии от заголовка */
 right: -14px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 .title {
    /* Прячем часть линий, выходящие за пределы блока */
      overflow: hidden;
    /* Выравниваем заголовок по центру, можно указать left, right для выравнивания влево или вправо */
    text-align: center;
    /* Размер заголовка */
    font-size: 25px;
}
. title:before,
.title:after {
    /* Свойство content необходимо указывать хотя бы пустое, иначе псевдоэлементы не отобразятся */
    content: «»;
    /* Свойства линий, выравнивание по центру по вертикали */
    display: inline-block;
    vertical-align: middle;
    /* Ширина — 100% и указываем толщину линии */
    width: 100%;
    height: 2px;
    /* Цвет линии */
    background-color: #f4801a;
    /* Возможность для пседоэлементов изменить позицию линии */
    position: relative;
}
.title:before {
    /* Ставим левую линию слева от текста, смещая ее на 100% влево */
    margin-left: -100%;
     /* Отступ линии от заголовка */
    left: -14px;
}
.title:after {
    /* Ставим правую линию справа от текста, смещая ее на 100% вправо */
    margin-right: -100%;
    /* Отступ линии от заголовка */
    right: -14px;
}
Для примера я разместил картинку такой реализации, хотя там я еще добавил дополнительные элементы (цветы) над линиями (сайт женский).

 
Автор Ложников АндрейВремя чтения 1 мин.Просмотры 353Опубликовано 03.08.2017Обновлено 03.12.2019














 Как добавить горизонтальную линию в HTML? 
 Улучшить статью
  Сохранить статью
 Уровень сложности:
Базовый
 Последнее обновление:
27 янв, 2022
 Читать
 Обсудить
 Улучшить статью
 Сохранить статью
 В этой статье мы увидим, как добавить горизонтальную линию в HTML. Для этого есть 2 подхода:
 С помощью тега
 С помощью свойств CSS
 Мы обсудим оба подхода последовательно, чтобы добавить горизонтальную линию.
  Добавление горизонтальной линии с помощью тега  
   :  Тег  Horizontal Rule  (
) используется для вставки горизонтальных линий в документ HTML для разделения разделов документа. . Это пустой или непарный тег, что означает, что закрывающий тег не нужен.
  Синтаксис: 
 
 
 
  Пример 1:  В этом примере описывается тег  
 для добавления горизонтальной линии.
 HTML 
   
  <   html   > 
      
  <   head   > 
         <   title   >Горизонтальная линия  title   > 
    head   > 
      
  <   body   > 
         <   h3   >Horizontal line  h3   > 
         <   hr   > 
         <   > 90 горизонтальная линия. 0060  p   > 
    body   > 
      
    html   > 
  Output: 
  Пример 2:  В этом примере описывается тег
 с различными атрибутами и их значениями для оформления горизонтальной линии.
 HTML 
0 9 0 
         <   h3   >Horizontal line using various attributes  h3   > 
         <   hr   width   =   "70%"   
    Размер   =   "20" 
    Выровнять   =   "Центр"  > 
 900 ". 0059        <   hr   width   =   "70%"   
             size   =   "20"   
             align   =   "right" 
    Color   =   «Синий»   Noshade> 
    <  HR   WIHD 9999 =   .0059 "500 пикселей;"   
             color   =   "red"   
             size   =   "10"   
             align   =   "left"   >  
    Body  > 
  
    HTML  > 
 900> 
 > 
 > 
 > 
 > 
>   0177  Выходные данные: 
  Добавление горизонтальной линии с помощью свойств CSS:  В этом случае мы будем использовать свойство    в стиле границы  для создания горизонтальной линии. Мы можем использовать либо свойство  border-top , которое указывает стиль верхней границы, либо свойство  border-bottom , которое может установить стиль нижней границы элемента. Оба свойства можно использовать для добавления горизонтальной линии.
  Пример 3:  В этом примере описывается рисование горизонтальной линии с использованием свойства  border-style .
 HTML   
  <   html   > 
      
  <   head   > 
         <   title   >Horizontal line   заголовок   > 
    головка   > 
      
 >
   
   
  <   html   > 
      
  <   head   > 
         <   title   >Горизонтальная линия с использованием свойств CSS  Название  > 
    <  Стиль  > 
    . Horizontal_line {
  9003 . 
                 ширина: 90%; 
                 высота: 5 пикселей; 
                 верхняя граница: 5 пикселей с черными точками; 
                 line-height: 80%; 
   } 
  
   . Линия {
    Граница: 5PX SOLD RED; 
                 margin-top: 5px; 
                 ширина: 90%; 
             } 
           style   > 
    head   > 
      
  <   body   > 
         <   h3   >Horizontal line using CSS Свойства  h3   > 
         <   div   класс   =   "горизонт"0059 >  div   > 
         <   div   class   =   "line"   >  div   > 
    body   > 
      
    html   > 
  Output: 
 
 Next
 Как сделать вертикальную линию с помощью HTML?
 Статьи по теме
 css - Как создать неполную горизонтальную линию в HTML? 
 спросил  6 лет, 6 месяцев назад 
 Изменено
 1 год, 6 месяцев назад
 Просмотрено
 44к раз
 Я хотел бы создать тонкую линию под основным заголовком на веб-странице по центру, что-то вроде этого. Как мне это сделать, используя  /hr  создаст сквозную линию.
 HTML
 CSS
 1
 В вашем примере это делается с помощью css, а не с помощью тега hr
Таким образом, либо вы можете использовать границу в стиле css, как в вашем примере, либо вы действительно можете использовать hr-тег, который вы даете CSS, например:
 
 
 Если вы хотите позиционировать час, вам может понадобиться position-style.
Вы можете легко попробовать это на примере сайта w3c.
 Помните, что атрибут hr-width (не стиль!) больше не работает в html5.
 0
 Вы можете использовать тег HR или тег HR с простым кодом CSS
 HTML-тег HR:
 Ваш код здесь

 
 Здесь тег HR с простым кодом CSS:
 hr {
ширина: 50%;
поле слева: авто;
поле справа: авто;
} 
 Ваш пример кода здесь
 
  Примечание:  Атрибуты, которые не поддерживаются в спецификации HTML5, связаны с внешним видом тега. Внешний вид должен быть установлен в CSS, а не в самом HTML.
 Так что используйте тег 
  без атрибутов, затем настройте его в CSS, чтобы он отображался так, как вы хотите.
 3
 Можно настроить ширину пульса
 
 
 Или в приведенном вами примере используется свойство css элемента div с нижней границей
 #yourDiv {
    нижняя граница: 1px сплошной серый;
}
 
 1
 можно сделать рестайлинг и добавить маржу к своему часу
 час {
  граница: нет;
  граница-верх:1px сплошная;/* или нижняя */
  маржа: 1em 15%; /* 15% или любое фиксированное или процентное значение, соответствующее вашим потребностям*/
  }

body {text-align:center;} 
  Любой контент до 
<ч/>
любой контент после
 
 ширина также используется поле фиксированной ширины
 hr {
  граница: нет;
  граница-верх:1px сплошная;/* или нижняя */
  поле: 1em авто;
  ширина: 17 см;
  }

body {text-align:center;} 
  Любой контент до 
<ч/>
любое содержимое после
 
 Вы также можете использовать нижнюю границу любого тега . ..
 h2 {
  нижняя граница: сплошная 1px;
  заполнение снизу: 0,5 см;
  дисплей: таблица; /* чтобы соответствовать ширине содержимого, в противном случае также работает отступ или фиксированная ширина */
  поле: 1em авто; /* если не отображается: таблица использует значения ширины или поля в качестве первого фрагмента */
  }

тело {выравнивание текста: центр;} 
  Любой контент до 
любой контент после
 
 HTML:
 CSS:
. час {
 ширина: 50%
 цвет: #222
 }
 html:
   Ваш код  
     <час>
 
 CSS:
 ч {
       выровнять содержимое: по центру;
       ширина: 20%;
       поле слева: авто;
       поле справа: авто;
        }
 
 Настройки стиля hr должны выполняться в CSS, а не в теле.
  Редактировать:  Я использовал ширину, чтобы контролировать длину горизонтальной линии, которая будет отображаться под моим заголовком или текстом. Margin-left и margin-right :auto автоматически помещают линию в центр, где, как обычно, линия начинается на одном конце страницы и заканчивается на другом.