Существует два способа добавления эффекта подчеркивания для текста. Самым простым является использование свойства text-decoration, о котором мы уже говорили в данной главе в разделе «Удаление подчеркивания ссылок». Такой метод позволяет добавить подчеркивание того же цвета, что и сам текст, как видно из следующего кода и рис. 2.12:

h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Рис. 2.12. Добавление эффекта подчеркивания для заголовка с помощью свойства text-decoration

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

Кроме того, вероятность спутать заголовок с эффектом подчеркивания, созданным описанным выше методом, со ссылкой гораздо ниже, чем при использовании свойства text-decoration. Однако внешний вид  данного эффекта может варьироваться в зависимости от используемого браузера, поэтому необходимо тщательно протестировать его во всех браузерах, которыми могут пользоваться потенциальные посетители вашего сайта.

Ниже представлено необходимое правило стиля:

h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}

Рис. 2.13. Создание эффекта подчеркивания с помощью нижней части рамки