Разрывная линия через текст

[Svatov]

Задача, на примере фрагмента из макета от Softlink.

Задача:

• На рисунке видим разрывную линию которая обрывается на тексте и после него продолжается.
  
• Текст выровнен по центру линии.
  
• Имеет ПРОЗРАЧНЫЙ фон, чтобы просвечивался фон родителя.
  
• Можно утрировать, линию делать как двухпиксельную разного цвета или сплошную.
  

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

[psywalker]

Svatov, Лови дружище! http://dabblet.com/result/gist/1540908

[Softlink]

С фикс размерами можно еще вешать через псевдоэлементы. Слева и справа. Хотя и не обязательно с фикс, лишь бы overflow был.

[Svatov]

Svatov, Лови дружище! http://dabblet.com/result/gist/1540908

Изучил вариант, шикарный в реализации, спасибо Очень гибкий, как раз то, что надо в большинстве случаев.

Еще предложения?

Edited March 28, 2012 by Svatov

[psywalker]

Еще предложения?

Блин, что за вопросы! Конечно же! Лови http://jsfiddle.net/pxDVx/41/

С фикс размерами можно еще вешать через псевдоэлементы. Слева и справа. Хотя и не обязательно с фикс, лишь бы overflow был.

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

[Softlink]

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

http://jsfiddle.net/W8ywC/embedded/result/

[psywalker]

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

http://jsfiddle.net/W8ywC/embedded/result/

Ааа, ну это понятно, но так нечестно) Снова сделано на "отвали"

[sigma77]

http://jsfiddle.net/wrZsr/

[Softlink]

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

http://jsfiddle.net/W8ywC/embedded/result/

Ааа, ну это понятно, но так нечестно) Снова сделано на "отвали"

Оно работает и работает везде и исправно.

p.s. Оксана ниже привела немного похожий пример.

[psywalker]

http://jsfiddle.net/wrZsr/

Воо, вот это ничтяк, Оксанка, спасибо

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

http://jsfiddle.net/W8ywC/embedded/result/

Ааа, ну это понятно, но так нечестно) Снова сделано на "отвали"

Оно работает и работает везде и исправно.

Не спорю. Но я люблю универсальные вещи всё же больше. Ты меня знаешь)

[Softlink]

Макс, последний вопрос и отойду от этой ветки В чем неуниверсальность?))) Хоть по центру поставь, хоть текст зафлоченным блоком сделай, все равно линии будут по бокам и по центру и не пересекут текст и фон любой можно использовать

[psywalker]

Макс, последний вопрос и отойду от этой ветки В чем неуниверсальность?))) Хоть по центру поставь, хоть текст зафлоченным блоком сделай, все равно линии будут по бокам и по центру и не пересекут текст и фон любой можно использовать

Ссори, я докопался, потому что подумал про фикс.

Кстати, на данный момент вот этот вариант мне кажется наиболее красивым из-за отстутствия лишней разметки.

[Softlink]

Кстати, на данный момент вот этот вариант мне кажется наиболее красивым из-за отстутствия лишней разметки.

Да, он неплох в какой-то мере. Вы его с Ильей, по-моему, в какой-то теме сочиняли (если память не изменяет). Только там в две строчки текста не добавишь.

[psywalker]

Кстати, на данный момент вот этот вариант мне кажется наиболее красивым из-за отстутствия лишней разметки.

Да, он неплох в какой-то мере. Вы его с Ильей, по-моему, в какой-то теме сочиняли (если память не изменяет). Только там в две строчки текста не добавишь.

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