ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создаем линию вокруг текста на сайте

Создаем линию вокруг текста на сайте

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

И так начнем, берем домен ZORNET.RU

Код

<h1>ZORNET.RU</h1>

И в CSS:

Код

h1 {
  overflow: hidden;
  position: relative;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
h1:before,
h1:after {
  content: '';
  display: inline-block;
  position: relative;
  top: -1px;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: black;
}
h1:before {
  left: -10px;
  margin-left: -50%;
}
h1:after {
  left: 10px;
  margin-right: -50%;
}

И так получаются стрелки.

27 Октября 2015 Просмотров: 1368 Комментариев: (5)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 5
Порядок вывода комментариев: Kolinkor 27 Октября 2015 23:24¹ 0 Но это же не скрипт, а что то из темы, что интересные решение. Kosten 27 Октября 2015 23:29³ 0 А разве там написано скрипт, этот материал даже не в категорий этой. Kolinkor 27 Октября 2015 23:24² 0 А так даже не знал, что можно делать. Сопрано 27 Октября 2015 23:30⁴ 0 Больше интересует h1, обязательно его ставить, или можно поменять и потом в стилях все изменить. Kosten 27 Октября 2015 23:34⁵ 0 Trantel, делаю на других стилях, по этому точно не скажу, но думаю возможно, если везде в стилях поменять, то должны полосы быть.