Подчеркнутый заголовок в html, как сделать,код,css

Как сделать подчеркнутый заголовок в html через css?

Мы поговорим о том, как сделать подчёркнутый заголовок. И нам не нужно редактировать весь сайт. Нам понадобится, код заголовка и файл стилей CSS,

Есть несколько вариантов  решения одной и той же задачи!

Описание проблемы:

У меня есть много страниц в простом  html, так много, что не поддается счету.

Если менять каждую страницу с заголовками, к примеру, придумать отдельный стиль, запаковать в  div и т.д., то потребуется столько времени, что боюсь даже подумать об этом!(и к тому же - на одной странице несколько заголовков.)

Задача:

Нужно сделать так -  не меняя код заголовков,  

<h2>Текст заголовка.</h2>,

прописать  через css,  чтобы появилась черта  - линия после заголовка.

Решение задачи:

У нас есть документ css, с прописанными свойствами для заголовка h2.

Я не буду расписывать, что значит каждая строка, просто приведу  стиль для заголока:

h2 {
font: 20px Times New Roman;
color: #003366;
line-height:30px;
letter-spacing: normal;
text-align: center;
margin-top: -5px;
}

Тетерь переработаем его так, чтобы появилась линия.

Удалим   позиционирование относительно верха - Это нам не понадобится.

margin-top: -5px;

Теперь добавим  свойство, которое сделает наш заголовок блоком, а не текстом.

display:block;

Далее пропишем задний фон:

Transparent – можно использовать, а можно и нет, но я решил сделать, со свойствами полупрозрачного фона, и использовать формат картинки заднего фона png. И будет повторение картинки по оси «х».

 url – путь до нашей картинки. Посмотрим на картинку в статичном состоянии без кода(что внутри прямоугольника это и есть наша картика):

background: transparent url(../1214/line.png) repeat-x;

Если вы хотите использовать данную картинку у себя, то  она здесь. Запакована в архив zip. Укажите место сохранения, извлеките картинку в нужную папку!

Теперь, задний фон нужно сместить ниже текста, т.е. позиционирование относительно  оси «y».

Установив максимальное значение -100%, получим линию под заголовком.

background-position-y: 100%;

Теперь, чтобы отодвинуть линию – черту от заголовка, ну, к примеру, пикселей на  10 -12, установим ширину нашего блока в 35 пикселей(чем больше или меньше это число, то тем ближе или дальше будет линия от текста, если вы увеличиваете это число на 2, то линия отодвинется на 1 пиксель):

height: 35px;

У нас получилось новое описание заголовка h2:

h2 {
font: 20px Times New Roman;
color: #003366;
text-align: center;
letter-spacing: normal;
display:block;
background: transparent url(http://axmara.narod.ru//1214/line.png) repeat-x;
background-position-y: 100%;
height: 35px;
}

Коды копируем отсюда.

Почему оставлены ссылки на мой сайт – читать обязательно!!?

Смотрим, как теперь выглядит новый заголовок h2:

Линия после заголовка.

Не нажали на рекламное объявление!?

Ничего страшного!

Вы ещё можете помочь проекту!

Да не оскудеет рука дающего!

Друзья! Мы тратим время + деньги и работаем для Вас, чтобы Вы смогли получить информацию!

Если у Вас есть время, чтобы оценить нашу работу, оставить сообщение в комментариях, поделиться ссылкой в соцсетях - это будет очень великодушно с Вашей стороны!

И мы будем Вам очень признательны за такие действия!

Заранее спасибо!

Комментарий через Vk.

Комментарий через Disqus, Facebook, Twitter, Google.

А теперь самое время развлечься!

Улучши поведенческий фактор на своём сайте!

Если понравится игра, то можно забрать код для своего сайта отсюда!

Индекс цитирования