Салават Абдуллин
9 августа 2012

Здравствуйте, Артем.

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

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



Салават!

У меня получилось так:

<style>
  h1 {
    position: relative;
    overflow: hidden;
    font-family: 'PT Sans', sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  h1:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 2px solid #4e4e4e;   
    margin-top: .6em;
    margin-left: .4em;
  }
</style>

<h1>Продукция</h1>

Продукция


Работает и с длинным текстом, и с фоновым изображением:

Продукция изоморфного математического горизонта


Трюк в том, что я не задаю псевдоэлементу с position:absolute координаты через top и left, и полоска оказывается там, где стоял бы статический строчный элемент — сразу за последней буквой заголовка.

Если эта полоска — элемент фирменного стиля, а не простая декорация, хорошо бы показать её и в старых версиях ИЕ (7 и ниже). Для этого псевдоэлемент замените реальным <i>, а для корректной работы overflow — добавьте *zoom:1 заголовку:

<style>
  h1 {
    position: relative;
    overflow: hidden;
    font-family: 'PT Sans', sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .1em;
    *zoom: 1;
  }
  h1 i {
    position: absolute;
    width: 100%;
    border-top: 2px solid #4e4e4e;
    margin-left: .4em;
    margin-top: .6em;
  }
</style>

<h1>Продукция<i></i></h1>

Это поведение описано в спецификации

Хорошая статья на тему:
Auto Positioning for Absolute Elements


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1




Недавно всплыло

3 Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1 Расскажите об обратной связи в интерфейсе 1 1