Как сделать линию в css after
Перейти к содержимому

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

  • автор:

Как сделать полоску с помощью :before, :after?

А зачем такие требования? У обоих псевдоэлементов поддержка браузерами хуже, чем просто border-bottom .

29 мар 2016 в 12:56
@ОлегДёгтев, откуда такие сведения про поддержку?
29 мар 2016 в 12:59
Ну вот нужно, подскажите пожалуйста
29 мар 2016 в 13:00
а у вас точно css? он же не поддерживает вложенное описание селекторов
29 мар 2016 в 13:05

@w3lifer: В моей практике все еще очень часто пишутся ТЗ, в которых требуется поддержка от ИЕ7. Если у вас иначе, то я вам завидую =)

29 мар 2016 в 15:31

1 ответ 1

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

Вот SCSS:

Пример

Отслеживать
ответ дан 29 мар 2016 в 13:01
Василий Барбашев Василий Барбашев
3,747 2 2 золотых знака 13 13 серебряных знаков 23 23 бронзовых знака
так-то предоставленный код не css, напрямую в браузере вряд ли заработает
29 мар 2016 в 13:02
@Grundy поправил
29 мар 2016 в 13:03
а без бордера возможно?например, высота и ширина?
29 мар 2016 в 13:03
@НикитаЩипилов поправил пример
29 мар 2016 в 13:04

@w3lifer это SCSS, удобная вещь, habrahabr.ru/post/140612 . Парсится потом в CSS, конструкции получаются более удобными и приятными глазу, + можно использовать калькуляцию и переменные

Точки между слов

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

Точки между слов

Рис. 1. Точки между слов

Линия между частями текста создаётся с помощью свойства border-bottom, оно позволяет задать одновременно желаемую толщину, стиль и цвет линии. В итоге мы легко можем сделать линию пунктирной или сплошной, поменяв в стилях одно значение. Сама линия выводится с помощью псевдоэлемента li::before , как показано в примере 1.

Пример 1. Точки между слов

Браузер Internet Explorer не поддерживает свойство order , в нём данный пример работать не будет.

См. также

  • align-items
  • border-bottom
  • flex-grow
  • order
  • Выравнивание гридов
  • Выравнивание с помощью флексбоксов
  • Макет сайта на флексбоксах
  • Наложение элементов сетки
  • Оформление ссылок
  • Свойства flex-контейнера
  • Свойства flex-элементов
  • Создание медиа-объектов
  • Создание флексбоксов

Как сделать заголовок с линиями по краям с помощью CSS

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

Поиск по интернет дает готовые приемы решения этого вопроса, которыми и хочу здесь поделиться.

Для заголовка используется тег div с классом .title и псевдоэлементы :before и :after. В div пишем нужный текст, а псевдоэлементы станут линиями по краям: :before — слева, а :after — справа.

Псевдоэлементы ::before и ::after

FORM - эффект плавающего текста (урок #4)

Это пятый урок по Form , в данном видео разберем псевдоэлементы ::before и ::after , рассмотрим как с ними можно работать, для чего они нужны и в заключении, при помощи их реализуем эффект по наведению у кнопки.

С псевдоэлементами before и after , вы наверняка уже знакомы, неоднократно их применяли, но мало кто понимаете их назначения, и немного о них поговорим.

Псевдоэлементы ::before и ::after

Само понятие псевдоэлемент состоит из двух слов, псевдо, и элемент. Псевдо, то есть не настоящий , слово элемент, говорит само за себя. То есть мы имеем некий элемент, которого нет в самой разметки страницы.

Псевдоэлементы в CSS

::before – означает, до или впереди (то есть, разместить элемент в впереди контента).

Псевдоэлемент before

::after – после или за (то есть, разместить элемент за контентом).

Псевдоэлемент after

Без чего это все работать не будет, это свойство content: “”; именно в нем мы прописываем значение, которое выводим в псевдоэлементе.

Свойство content

Давайте разберемся, при каких обстоятельствах они применяются рассмотрим пример с формой.

В нашей форме присутствуют кнопки, и допустим хотим их как то визуализировать, придать им некую анимацию. Для это нужно дополнить верстку дополнительными элементами, но не всегда это удобно делать в html структуре. Так как, это может быть целый сайт, портал, сделан на какой-то CMS системе. И если в ней нет опыта работы, то сложно не просто дописать код, но и еще найти, где он формируется. Вот как раз псевдоэлементы в данном случае замечательно вручают.

Другой пример, когда на страницу нужно вставить иконку не вмешиваясь в ее структуру. Этот пример я часто использую в своих урока, как это делается вы наверняка уже видели.

Следующий пример, это bootstrap , чтобы не плодить дополнительные блоки в html разметки, они при помощи псевдо элементов сбрасывают обтекание, что бы границы блоков не схлопывались.

Так же псевдоэлементы применяются когда хотим изменить стандартный элемент HTML структуры, сделать его необычным по оформлению, или анимировать. Как это мы с вами будем делать в следующем уроке на примере чекбокса.

Вот в таких случаях замечательно подходят псевдоэлементы ::before и ::after , благодаря им, мы можем вставлять различное текстовое содержание, элементы, не вмешиваясь в html структуру самой страницы.

Добавляем контент при помощи ::before и ::after

Что бы использовать псевдоэлементы, нужно определиться, в какой блок структуры, планируем их добавлять, и для какой цели они там нужны. Допустим, мы хотим придать некий шарм тексту в нутрии кнопки, и это оформление будет в виде дополнительных символов, впереди и позади основного содержания.

Открываем стили, отбираем кнопку с классом button , и через двоеточие, задаем псевдоэлемент ::before , то есть, элемент который будет идти перед контентом. По поводу двух двоеточий, не обязательно их прописывать в двойном виде, можно так же написать одно двоеточие и это не будет являться ошибкой. Просто с двумя двоеточиями проще ориентироваться по коду, и когда их встречаешь, понимаешь что это дополнительный элемент, который выводят на странице.

Далее создаем свойство content , и в нутрии кавычек прописываем символ, который хотим отобразить \21D2 .

Как видим, появился первый элемент, и по такому же принципу создаем за текстовым содержанием второй элемент при помощи ::after .

/* Эффект кнопки */ .button::before < content: '\21D2 '; >.button::after

Кто не знал, добавление контента впереди или позади основного текста это и есть основное предназначение псевдоэлементов ::before и ::after . Но мы пойдем немного дальше и рассмотрим вариант, когда их можно использовать для добавления различных элементов.

Эффект у кнопки

На базе псевдоэлементов сделаем эффект по наведению на кнопку.

Нам понадобятся два блока с разными оттенками цветов. Один расположим с левой стороны, другой снизу, а по наведению на кнопку их будем перемещать в центр, тем самым получим своеобразный эффект.

Установим для кнопки относительно позиционирование, то есть, мы задаем родителя, в котором будем выравнивать его дочерние элементы.

a.button

Текст при наведении делаем белым цветом.

a.button:hover

Затем создадим два контейнера и разместим их в начальных позициях, а далее анимируем их.

Начинаем с псевдоэлемента ::before , это будет блок который расположим с левой стороны. Текстовую информацию он не содержит, поэтому убираем все содержимое content , оставляем только пустые кавычки, так как без них псевдоэлемент не отображается. Делаем его блочным элементом шириной и высотой равной самой кнопки. Задаем задний фон, и при помощи позиционирования смещаем блок в левую сторону.

.button::before

Тоже самое описываем для второго блока ::after , только в отличие от предыдущего расположенным его с низу и заменим цвет. Для этого дублирую все стили, изменяю только цвет и координаты его расположения.

.button::after

Как видите, получается много дублирующего кода, давайте это все объединим и добавим плавность передвижения.

.button::before, .button::after < content: ''; display: block; width: 100%; height: 100%; background: #28a5c4; position: absolute; top: 0; left: -100%; transition: .3s; >.button::after

Эффекты при помощи ::before и ::after

Анимируем передвижение

При наведении возвращаем координаты в нулевое положение.

.button:hover::before < left: 0; >.button:hover::after

Добавляем небольшую паузу, между перемещением блоков.

.button::after

Что бы видеть текст кнопки задаем их приоритет при помощи z-index.

a.button < … z-index: 1; >.button::before, .button::after

Остается скрыть содержимое за пределами кнопки и сделать небольшой контур в нижней ее части.

a.button

В итоге получаем такой интересный эффект по наведению. Цель данного урока, не показать вам очередной эффект, а дать общее понятие по применению псевдоэлементов, что бы вы в дальнейшем смогли сами с ними работать.

Для домашнего задания, при помощи CSS выведите самостоятельно иконки, во вкладках «Авторизация» и «Регистрация».

Домашнее задание по псевдоэлементам

Урок подготовил Горелов Денис.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *