Как вставить разделительную полосу в html

 class="create-line">

.create-line  height: 200px; border-left: 3px solid #32a1ce; > 

С помощью псевдоэлементов :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: 150px; height: 1px; /* располагаем линию сверху от текста */ top: 25px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Как сделать разделительную полосу в поле input

там где лупа и ввод текста есть полоса вертикальная, как ее сделать?

Отслеживать
задан 18 ноя 2016 в 13:11
81 2 2 золотых знака 3 3 серебряных знака 10 10 бронзовых знаков
Картинкой, псевдоэлементами. С исходным кодом было бы понятнее
18 ноя 2016 в 13:14
картину не добавляю, добавил иконку через fontawesome
18 ноя 2016 в 13:15

Думаю он имел ввиду слева есть блок с картинкой или вашей иконкой, у нее может быть border-right , а правее уже input . Но если честно я не знаю других путей сделать это, так что мне интересно 🙂

18 ноя 2016 в 13:24

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

form, .form-row < position: relative; >/* Иконка поиска */ label < width: 50px; position: absolute; top: 5px; left: 0px; bottom: 5px; line-height: 40px; text-align: center; color: #9a9a9a; border-right: 1px solid #afafaf; >/* Дополнительные стили для наглядности: */ form < padding-right: 100px; >/* Кнопка поиск */ input[type="submit"] < background: #269dc7; color: #fff; border:none; height: 50px; width: 100px; font-weight: bold; position: absolute; top: 0; right: 0; cursor: pointer; >/* Поле поиска */ input[type="search"]

Отслеживать
ответ дан 18 ноя 2016 в 13:47
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков

Если автору хочется вертикальную полоску внутри инпута, то можно и так:

input < background:#f5f5f5; border: 1px solid #dcdcde; padding:0 0 0 65px; height:30px; >.input-separator < width:1px; height:26px; display: block; border-left: 1px solid #dcdcde; position:absolute; left:30px; top:3px; >.input-block

Отслеживать
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
ответ дан 18 ноя 2016 в 13:35
3,354 10 10 серебряных знаков 14 14 бронзовых знаков

Единственный вопрос. Почему мы делаем отступ для полосы сверху 3 px? По логике вещей, высота родителя — 30px, отнимаем -26px, получаем 4 пикселя в распоряжения. Сверху 2 и внизу 2(учитывая border родителя будет как раз отступ в 1 px), должно быть top:2px , но так прижимается к верхней части и я не пойму почему.

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

 
'); background-size: 6px 6px; > 

Наклонные линии

04.09.2018, обновлено 09.04.2021
Предыдущая запись Добавление CSS стилей на страницу
Следующая запись После отправки формы сохранить позицию скролла

Комментарии 2

6 апреля 2020 в 23:43
А можно в линиях под уголом сам угол поменять?

• Скопировать ссылку
• Пожаловаться

1 апреля 2023 в 20:33
да, число у deg меняйте:
transform:rotate(2deg);
и угол изменится

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Сборник CSS стилей с эффектом фильтров Инстаграма.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.