Как сделать горизонтальную пунктирную линию с рисунком?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Сделать горизонтальную пунктирную линию с изображением ножниц.
Решение
В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.
Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 1 показано, что хотелось бы получить в итоге.
Рис. 1. Горизонтальная линия
В идеале, линия должна формироваться единственным тегом <div>, а всё остальное возлагается на стили, включая вывод рисунка и надпись.
Для начала в HTML вставим основу линии.
<div class="line"></div>Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top. Если бы рисунок выводится над линией, соответственно потребуется border-bottom. Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.
.line {
border-top: 1px dashed #000; /* Параметры линии */
height: 18px; /* Высота блока */
background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).
Рис. 2. Изображение ножниц для линии
Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after, в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line.
.line:after {
content: "Линия отреза";
}Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).
Пример 1. Линия
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Линия отреза</title>
<style>
.line {
text-align: center; /* Выравниваем текст по центру */
border-top: 1px dashed #000; /* Параметры линии */
height: 18px; /* Высота блока */
background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}
.line:after {
content: "Линия отреза";
font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
font-size: 12px; /* Размер шрифта */
vertical-align: top; /* Выравнивание по верхнему краю */
}
</style>
</head>
<body>
<p>Текст до</p>
<div class="line"></div>
<p>Текст после</p>
</body>
</html>Браузеры
Браузер IE6-7 не поддерживает псевдоэлемент :after, поэтому текст под линией в нём выводиться не будет.
