Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов :before и :after.

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

Создание такого эффекта выполняется простым кодом. Первоначально задаем HTML-разметку с использованием заголовка первого уровня h1:

 about me

И прописываем для него CSS-правила, чтобы привести его к тому виду, который нам необходим:

h1{
 width: 900px;
 margin: 100px auto;
 border: 1px solid #000;
 text-align: center;
 font-size: 40px;
 line-height: 60px;
 text-transform: uppercase;
 position: relative;
}

Выравнивание по центру, размер шрифта (кегль) и высота блока через интерлиньяж line-height, делаем все буквы заглавными - все стандартно. Но не забываем о позиционировании, которое устанавливаем относительным, ибо оно потребуется нам для псевдо-элементов :before и :after.

Теперь создаем общие правила для обоих псевдо-элементов :before и :after.

h1:before, h1:after{
 content: '';
 position: absolute;
 top: 50%;
 margin-top: -2px;
 left: 0;
 height: 4px;
 width: 320px;
 background-color: #000;
}

Единственным примечательным моментом в этом коде является свойство top: 50%, которое размещает линию точно по центру вертикали блочного элемента. В нашем случае таким блочным элементом является заголовок первого уровня h1. Кроме того, нужно установить еще одно правило - margin-top: -2px.

Этим правилом мы поднимаем сгенерированные линии вверх на половину их высоты. Почему это нужно делать, можно догадаться и так.

Так как правила мы прописали для обоих элементов, то следуют переписать некоторые из них для элемента :after. Точнее - нам нужно только правило right, чтобы “сдвинуть” его вправо:

h1:after{
 right: 0;
 left: auto;
}

Результат работы кода показан на рисунке ниже. Граница для заголовка задана мною для наглядности:

Полностью весь код для создания такого эффекта приведен ниже:

h1{
 width: 900px;
 margin: 100px auto;
 border: 1px solid #000;
 text-align: center;
 font-size: 40px;
 line-height: 60px;
 text-transform: uppercase;
 position: relative;
}
h1:before, h1:after{
 content: '';
 position: absolute;
 top: 50%;
 margin-top: -2px;
 left: 0;
 height: 4px;
 width: 320px;
 background-color: #000;
}
h1:after{
 right: 0;
 left: auto;
}

UPD 19\01\2014

Для быстроты, удобства и краткости можно воспользоваться готовым миксином из библиотеки Scut - Side-Lined.

На этом все.