CSS        03 февраля 2016        4925         0

Создание горизонтальной линии рядом с текстом при помощи CSS

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

Сегодня я напишу о том, как создать горизонтальную линию с помощью html и как расположить ее рядом с текстом при помощи CSS.

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

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

Вариант 1. Используем псевдоэлементы CSS (Используется только в CSS 3)

Базовая структура блока над которым мы будем колдовать.

Немного теории:
Псевдоэлементы — это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.

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

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

Дописываем стили и получаем такой вид, не забудьте добавить эти стили в ваш файл темы (style.css или любой другой)

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

Создание горизонтальной линии при помощи CSS

Вариант 2. Когда необходимо растянуть линию на всю ширину.

В этот раз мы изменим базовую структуру блока и добавим небольшую подложку в виде тега span.

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

Далее нам понадобится задать стиль для нашего тега span, задать ему белый фон (в зависимости от цветовой схемы вашего сайта) и задать ему отступ (свойство padding) и выравнивание относительно верхней части блока (свойство – top. Можно убрать, если не нужно)

Также не забываем разместить картинку на Вашем сервере и прописать до нее правильный путь (свойство background: url)

В итоге наши стили приобретут такой вид

Создание горизонтальной линии при помощи CSS

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

Создание горизонтальной линии рядом с текстом при помощи CSS
3.67 (73.33%) Проголосовало: 3

comments powered by HyperComments