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

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

Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.

Для :after характерны следующие особенности.

  • При добавлении :after к блочному элементу, значение свойства display может быть только: block , inline , none , list-item . Все остальные значения будут трактоваться как block .
  • При добавлении :after к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере в конце текстового абзаца, помеченного классом new , выводится определенный текст для привлечения внимания. Результат примера показан на рис. 1.

Результат использования псевдоэлемента :after

Рис. 1. Результат использования псевдоэлемента :after

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre> .

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :after к тегу <fieldset> .

Firefox до версии 3.5 не допускал применение к :after свойств position , float , list-style-type и некоторых значений display .

Диагональная линия в css. Как?

Как сделать "декоративную" (диагональную) линию белого цвета шириной 1px для блока. При изменении размера блока, линия должна оставаться по диагонали (являлась адаптивной)?

С помощью js можно, например, сделать так:

С помощью JS и Linear-gradient

Не совсем понятен вопрос, но как вариант:

  • задать блоку position: relative ,
  • разместить внутри него блок с position: absolute ,
  • задать ему border-bottom: 1px solid #someColor
  • и применить transform: rotate(someAngle) .

Вроде бы ничего сложного.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css вёрстка svg или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

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

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

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