xandeadx.ru Блог музицирующего веб-девелопера

CSS → Линии вокруг текста

Опубликовано в

Один из способов вывода линий до и после текста на всю длину контейнера:

HTML:

<h1>Текст</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%;
}

Демо
Источник

Похожие записи

Комментарии RSS

спасибо.
пригодилось

Спасибо, и мне тоже пригодилось.
http://screenshot.ru/82ebbcf770d370d7838461058ab16b06.png

Спасибо!

Огромное спасибо! корректно работает

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании