x
 
Салават Абдуллин
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.

Что дизайнеру стоит знать о якорных ссылках? Чем дизайнеру могут помочь инструменты разработчика? Анализ сетевых запросов Чем плоха стилизация по айди? Вредные комментарии: зарубки, тудушки и документашки




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

2 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33