В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.

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

Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.

Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.

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

Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка ul.

Но сначала посмотрим на образец, с которым будем работать:

Навигационное меню хлебные крошки

Меню достаточно простое, как и код, с помощью которого мы будем его создавать.

HTML код - маркированный список ul

<ul class="crumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Main section</a></li>
  <li><a href="#">Sub section</a></li>
  <li><a href="#">Sub sub section</a></li>
  <li>The page you are on right now</li>
</ul>

Все пункты меню имеют ссылки, кроме последнего - “The page you are on right now” (Страница, на которой вы сейчас находитесь). При работе над меню я задавался вопросом - является ли список наиболее подходящей структурой для создания меню? Я полагаю, что применение списка в этом случае не является строгим правилом, но мне кажется - это наиболее семантичный и правильный вариант.

CSS код - создаем стили для меню

Задаем общие стили для меню - убираем маркеры и обнуляем отступы в браузерах Firefox, IE:

ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Далее для меню задаем класс с именем crumbs, устанавливаем границу толщиной в 1px и фиксированную ширину 30px:

.crumbs {
  border: 1px solid #dedede;
  height: 30px;
}

Все “крошки” должны располагаться горизонтально, в одну линию, поэтому элементы li делаем плавающими через свойство float:left. Текст меню должен быть отцентрирован точно по вертикали, для этого устанавливаем для него значение свойства line-height равное высоте всего меню - 30px.

Помещаем слева каждого пункта небольшое пространство для отступа с помощью padding-left: 10px. И задаем цвет текста #777:

.crumbs li {
  float: left;
  line-height: 30px;
  padding-left: 10px;
  color: #777;
}

Нам необходимо, чтобы вся область пункта меню была кликабельной, поэтому делаем ее блочным элементом display:block. Далее помещаем для ссылки фоновое изображение, вырезанное из макета. Для этого нужно вырезать только саму “стрелку”:

Вырезание стрелки из навигации

… которую “задвигаем” вправо (100%) и размещаем точно по вертикали (50%). Также делаем у ссылки отступ справа padding-left: 15px, в котором будет как раз и находиться фоновое изображение (вырезанная стрелка):

.crumbs li a {
  display: block;
  padding: 0 15px 0 0;
  background: url(img/crumbs.gif) 100% 50% no-repeat;
}

Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:

.crumbs li a:link, .crumbs li a:visited {
    text-decoration: none;
    color: #777;
  }

Придадим ссылкам небольшую анимацию с помощью псевдо-класса :hover и :focus. При наведении курсора мыши или получения фокуса с клавиатуры цвет текста ссылки будет меняться:

.crumbs li a:hover, .crumbs li a:focus {
    color: #dd2c0d;
  }

Результат нашей работы представлен здесь:

Готовая навигация хлебные крошки

Примечание переводчика:

Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!

На этом все.


Создание приподнятых теней (lifted shadow) с помощью CSS.

Такие тени создаются с помощью двух псевдо-элементов :before и :after. Дополнительной HTML-разметки при этом не требуется. Оба псевдо-элемента применяются только к одному элементу, который должен быть блочным. Ниже показана последовательность действий, которая совсем несложная.

Статья написана по мотивам известного блога Николаса Галлахера, где показаны самые разнообразные виды таких сложных теней.

Приступаем к написанию кода. Создаем элемент p и для него прописываем правила (чтобы смотрелся хорошо):

 class="lifted">
 Lifted Corners

.lifted{
 width: 400px;
 background-color: #fff;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 line-height: 70px;
 box-shadow: 0 0 40px rgba(0,0,0,0.3) inset;
 position: relative;
}

Здесь все несложно. Задаем ширину и высоту блока, а также косметическую красоту типа выравнивания по центру и придания тени для блока. Не забываем сделать блок относительно позиционированным, так как в последующих шагах нам потребуются псевдо-элементы, которые нужно будет позиционировать относительно блока-родителя.

Такой интересный момент в этом коде - нужно обязательно явно установить фоновый цвет для блока background-color: #fff. Иначе он будет прозрачным по умолчанию и сквозь него будут проступать наши тени.

Необходимо получить две тени, одна из которых располагается под левым углом блока, а другая - под правым. Поэтому нам потребуются два псевдо-элемента - :before и :after. Создаем правила, общие для обоих псевдо-элементов:

.lifted:before, .lifted:after{
 content: '';
 position: absolute;
 width: 50%;
 height: 10%;
 bottom: 15px;
 left: 4px;
 z-index: -1;
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
   -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
     box-shadow: 0 15px 10px rgba(0,0,0,0.6);
}

Немного “расшифруем” показанный выше код. Устанавливаем для обоих псевдо-элементов абсолютное позиционирование и координаты: от нижней границы 15px (bottom: 15px) и от левой границы 4px (left: 4px;). Ширину элемента устанавливаем в половину от ширины элемента-родителя (width: 50%;), высоту - 10% от ширины этого же элемента. Один интересный момент, про который не нужно забыть - “подсовываем” тени под блок-родитель с помощью свойства z-index: -1. Ну и создаем сами тени правилом box-shadow: 0 15px 10px rgba(0,0,0,0.6), указав браузерные префиксы.

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

.lifted:after{
 left: auto;
 right: 4px;
}

Почти все готово. Осталось только сделать для обеих теней “косину”, то есть развернуть их на определенное количество градусов. Левую тень развернем против часовой стрелки, чтобы ее внутренний угол оказался под блоком-родителем. Правую развернем точно также, только по часовой стрелке, чтобы ее внутренний угол также “спрятался” под блоком. Разворачивание будем выполнять с помощью правила transform: rotate для псевдо-элемента :before -

-webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
    transform: rotate(-3deg);

и для псевдо-элемента :after -

-webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
    transform: rotate(3deg);

Результат нашей работы можно посмотреть ниже. Красиво!

Блок с тенями под углами

Можно немного усложнить задачу и сделать нижние уголки блока визуально приподнятыми. Создастся иллюзия того, что у блока завернутые вверх уголки, как у листочка бумаги. Для этого нужно вспомнить о том, что у свойства border-radius есть два параметра, а не одно.

То есть, для одного угла можно задать два радиуса скругления, и тогда само скругление получиться не таким “правильным”, но более реалистичным. Первый радиус делаем большого размера, а второй немного меньше.

В результате угол получается не скругленным, а немного скошенным. В нашем примере для блока-родителя задаем радиусы скругления нижних углов следующим образом:

border-bottom-left-radius: 40px 12px;
border-bottom-right-radius: 40px 12px;

Итогом получается картинка листочка бумаги с завернутыми уголками:

Завернутые уголки на чистом CSS

На сайте Николаса Галлахера есть множество других примеров создания теней, которые по-настоящему впечатляют. В этой статье приведен только один из них, самый распространенный. Как видите, ничего сложного в его создании нет. Но вот на кросс-браузерность такой пример мною не рассматривался, ибо мне был важен сам результат.

На этом все.


В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

При построении горизонтального меню нужно быть внимательным с принципом специфичности CSS, то есть - с вложенностью и каскадностью правил. Хорошим подспорьем в этом вопросе является SASS (SCSS), благодаря которому исключаются ошибки при соблюдении каскадности и наследовании свойств.

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках - Часть 1”, “SASS (SCSS) в картинках - Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны - нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

 class="hormenu">
 
  • class="arrow" href="#">Link_1 class="sub-hormenu">
  • href="#">Link_1-1
  • href="#">Link_1-2
  • href="#">Link_1-3
  • href="#">Link_1-4
  • href="#">Link_2
  • class="arrow" href="#">Link_3 class="sub-hormenu">
  • href="#">Link_3-1
  • href="#">Link_3-2
  • href="#">Link_3-3
  • href="#">Link_4
  • class="arrow" href="#">Link_5 class="sub-hormenu">
  • href="#">Link_5-1
  • href="#">Link_5-2
  • href="#">Link_5-3
  • href="#">Link_5-4
  • href="#">Link_5-5
  • Структура подобного меню абсолютно одинакова со структурой вертикального меню. Также имеется внешний маркированный список с пунктами в виде ссылок, перед некоторыми из которых добавлены дополнительные подменю, выполненные также в виде маркированного списка.

    Различие между внешним и внутренним меню в классах, с помощью которых они будут видоизменяться. Помимо этого вы можете заметить, что у некоторых ссылок есть класс arrow, но о нем мы поговорим позже.

    Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

    .hormenu{
     margin: 50px 0 0 50px;
     overflow: hidden;
     li{
      float: left;
      margin-left: 1px;
      &:first-child{
       margin-left: 0;
      }

    Думаю, ничего загадочного в этой части кода нет. Делаем отступ для меню и располагаем элементы li внутри него горизонтально с помощью свойства float: left. Предотвращаем схлопывание (collapse) блока-родителя ul, прописав для него overflow: hidden.

    Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого margin в 1px. И для аккуратности уберем левый margin у первого элемента li.

    Далее оформляем ссылки внутри пунктов li. Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и text-align для выравнивания по горизонтали. Цвет фона и цвет текста - как обычно.

    Помимо этого, делаем ссылки с относительным позиционированием - оно нам пригодиться позже, когда будем отрисовывать треугольники. В этом коде стоит обратить внимание только на один момент - ширина элемента задается жестко. Это делается для того, чтобы основное меню не дергалось вправо-влево.

    Возможна ситуация, когда пункт подменю по ширине будет больше, чем пункт основного меню, и тогда ребенок “растянет” своего родителя.

    При скрытии же подменю пункты основного меню будут “сжиматься”, уменьшая ширину до своей собственной. Вот для этой цели и применяется явное задание ширины элемента a:

    a{
     display: block;
     line-height: 25px;
     height: 25px;
     width: 130px;
     text-align: center;
     background-color: #ccc;
     color: #ccc - #555;
     position: relative;
    }

    Продолжим стилизацию нашей навигации и займемся подменю, а точнее - его подпунктами li. Уберем у этих элементов плавание влево float и левый margin, чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы li расположились вертикально, а левый margin - убрать “лесенку”:

    li{
     float: none;
     margin: 0 0 1px 0;

    Стилизуем ссылки пунктов подменю. Делаем фоновую заливку чуть светлее, чтобы отличалась от основного меню, а текст - чуть темнее по той же причине. Ну и анимация пунктов при наведении курсора мыши:

    a{
     background-color: #ccc + #111;
     color: #ccc - #333;
     &:hover{
      background-color: #ccc + #222;
     }
    }

    Теперь самое главное - сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства dislay: none:

    .sub-hormenu{
     display: none;

    … а затем будем показывать его только при наведении курсора мыши на пункт меню. Код здесь может показаться немного непонятным, но знак амперсанда означает тоже, что и класс hormenu:

    &:hover .sub-hormenu{
     display: block;
    }

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

    Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу arrow, который будем “вешать” только на нужные нам ссылки:

    .arrow:after{
     content: '';
     position: absolute;
     top: 50%;
     left: 80%;
     width: 0;
     height: 0;
     border-top: 4px solid #ccc - 666;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     margin-top: -2px;
    }

    Вот, в принципе, и все. Основная задача выполнена и горизонтальное меню с выпадающим подменю у нас работает. Конечно, можно озадачиться целью “окрасить” активный пункт основного меню в тот же цвет, что и у подменю. Но эта проблема не входит в рассмотрение поставленной нами задачи. Ниже представлен полный код правил CSS (SCSS) для нашего меню:

    @import "compass/reset";
     a{
      text-decoration: none;
     }
     .arrow:after{
      content: '';
      position: absolute;
      top: 50%;
      left: 80%;
      width: 0;
      height: 0;
      border-top: 4px solid #ccc - 666;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      margin-top: -2px;
     }
     .hormenu{
      margin: 50px 0 0 50px;
      overflow: hidden;
      li{
       float: left;
       margin-left: 1px;
       &:first-child{
        margin-left: 0;
       }
       &:hover .sub-hormenu{
        display: block;
       }
       .sub-hormenu{
        display: none;
        li{
         float: none;
         margin: 0 0 1px 0;
         a{
          background-color: #ccc + #111;
          color: #ccc - #333;
          &:hover{
           background-color: #ccc + #222;
          }
          &:after{
           content: none;
          }
         }
        }
       }
       a{
        display: block;
        line-height: 25px;
        height: 25px;
        width: 130px;
        text-align: center;
        background-color: #ccc;
        color: #ccc - #555;
        position: relative;
       }
      }
     }

    … и то, как оно выглядит:

    Горизонтальное меню на CSS

    Горизонтальное меню с выпадающим подменю

    На этом все.


    Продолжаем изучение CSS и сегодня приступим к построению вертикального меню.

    Такие меню очень популярны и без них не обходится каждый второй сайт. Статей по созданию подобной навигации написано немало, но меня данный факт волнует мало. Моя задача - разобраться в принципе построения подобного меню и возможность сделать его самому, на коленках за пару минут. В действительности все просто, даже очень просто.

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

    Механизм действия и построения такого меню основан на одном единственном CSS-свойстве - display, а точнее на его значениях - display: block и display: none.

    В этой статье будет создаваться простое вертикальное меню, в котором подменю размещается сбоку от основного меню. Существует более сложный вариант вертикального меню, в котором подменю размещается внутри основного.

    Такая навигация называется меню-аккордеон и принцип его создания будет рассмотрен позже.

    C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем menu, так как он нам понадобиться в дальнейшем:

     class="menu">
     
  • href="#">Punkt 1
  • href="#">Punkt 2
  • href="#">Punkt 3
  • href="#">Punkt 4
  • href="#">Punkt 5
  • Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).

    То есть, у нас есть пять пунктов внешнего меню - вот мы и вложим в каждый из них еще одно меню, перед ссылкой. Ссылка будет исполнять роль переключателя, который будет переводить значение свойства display из none в block и наоборот.

    В итоге получиться пять подменю, для каждого из которых мы пропишем один класс - sub-menu. Этот класс нам также потребуется в дальнейшем:

     class="menu">
     
  • href="#">Punkt 1 class="sub-menu">
  • href="#">Punkt 1-1
  • href="#">Punkt 1-2
  • href="#">Punkt 1-3
  • href="#">Punkt 2 class="sub-menu">
  • href="#">Punkt 2-1
  • href="#">Punkt 2-2
  • href="#">Punkt 2-3
  • href="#">Punkt 3 class="sub-menu">
  • href="#">Punkt 3-1
  • href="#">Punkt 3-2
  • href="#">Punkt 3-3
  • href="#">Punkt 4 class="sub-menu">
  • href="#">Punkt 4-1
  • href="#">Punkt 4-2
  • href="#">Punkt 4-3
  • href="#">Punkt 5 class="sub-menu">
  • href="#">Punkt 5-1
  • href="#">Punkt 5-2
  • href="#">Punkt 5-3
  • Все - каркас будущего вертикального меню готов и больше мы его трогать не будем. Остальные действия будем выполнять только с помощью CSS. Для начала создадим базовые стили, чтобы придать нашему меню хоть какой-то вид:

    *{
     margin: 0;
     padding: 0;
    }
    a{
     text-decoration: none;
    }
    ul{
     list-style-type: none;
    }
    .menu{
     margin: 30px 0 0 30px;
     width: 100px;
    }

    Здесь мы обнуляем margin и padding для всех элементов, в том числе и ul; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.

    Для внешнего списка с классом menu задаем отступ сверху и слева, чтобы не прилипал к границам окна браузера и устанавливаем фиксированную ширину в 100px.

    Дальше форматируем пункты меню:

    .menu li{
      position: relative;
      line-height: 20px;
      background-color: #ccc;
      margin-bottom: 1px;
     }

    Ставим высоту каждого элемента li равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний margin в 1px, чтобы элементы li не сливались между собой и были похожи на пункты меню.

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

    Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню - размер шрифта (кегль) и цвет текста:

    .menu li a{
     font-size: 16px;
     color: #000;
    }

    Теперь приступаем к самому интересному - стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):

    .sub-menu{
     width: 90px;
    }

    Затем установим для подменю абсолютное позиционирование для того, чтобы сместить его вправо на значение, равное ширине внешнего списка и “прилепить” кверху каждого из элементов li.

    И самое главное - скроем его отображение в браузере через правило display: none. В результате код будет выглядеть следующим образом:

    .sub-menu{
     width: 90px;
     position: absolute;
     left: 100px;
     top: 0;
     display: none;
    }

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

    .sub-menu li{
     background-color: #aaa;
    }
     .sub-menu li a{
      color: #fff;
     }

    Заключительный код, который заставляет наше меню работать именно так, как задумано. То есть, этим мы говорим браузеру присвоить свойству display значение block при наведении мыши на ссылку во внешнем списке:

    .menu li:hover .sub-menu{
     display: block;
    }

    В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него display: none. То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент ul с классом sub-menu отсутствовал.

    Так как этому подменю задано абсолютное позиционирование со смещением вправо на 100px и вверх на 0px, то оно поместиться точно справа вверху от своего родителя - пункта меню внешнего списка.

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

    Вертикальное меню на CSS

    И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:

    Вертикальное меню на CSS с подменю

    На этом все.


    Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов :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;
    }

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

    Зачеркнутый заголовок на 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;
    }
    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.

    На этом все.