• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Текст поверх линии на странице сайта в CSS (Как сделать линии до и после текста в html css)
Текст поверх линии на странице сайта в CSS
Kosten
Дата: Пятница, 2019-01-18, 04:27 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


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

Вашему вниманию CSS-код с заданным заголовком для основных свойств.

Вот так получится:



Задаем класс в в коде HTML

Код
<h1 class="vedamib-tubdem">Текст поверх линии</h1>


Теперь осталось прописать стили CSS

Код
.vedamib-tubdem {    
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}
.vedamib-tubdem:before,
.vedamib-tubdem:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #000;
  z-index: -1;
  position: relative;
  vertical-align: middle;
}
.vedamib-tubdem:before {
  right: 15px;
  margin: 0 0 0 -100%;
}
.vedamib-tubdem:after {
  left: 15px;
  margin: 0 -100% 0 0;
}


Демонстрация
Прикрепления: 4790867.jpg(53.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Текст поверх линии на странице сайта в CSS (Как сделать линии до и после текста в html css)
  • Страница 1 из 1
  • 1
Поиск: