Как применить дополнение или маржу к этому заголовку, отображаемому как таблица-ячейка?

Я адаптировал пример для заголовка со строками на стороне (found here, а точнее: here). Он работает очень хорошо, но то, что я не могу сделать, это применить некоторые дополнения к любой стороне текста и иметь линии на стороне, чтобы обнять обе стороны контейнера. Кто-нибудь знает как это сделать?Как применить дополнение или маржу к этому заголовку, отображаемому как таблица-ячейка?

До сих пор у меня есть следующий HTML:

<h2 class="section-heading">Example</h2>

и CSS:

.section-heading { 
    display: table; 
    white-space: nowrap; 
} 

.section-heading:before, 
.section-heading:after { 
    background: linear-gradient(to bottom, black, black) no-repeat center/90% 1px; 
    content: ""; 
    display: table-cell; 
    width: 50%; 
}

(я положил его на jsfiddle, предпочтительно я хотел бы сделать это без каких-либо дополнительных элементов)

источник

2013-10-01 Anonymous

border-top не может быть выровнен к середине ... лучше использовать css-фон –

@ C-Link, да, я смог сделать это с фоном, только теперь у меня возникла проблема с попыткой применить дополнение к текст. Есть идеи? –

@ C-Link, в основном, я ищу, чтобы левая линия обнимала левый край контейнера, а правая линия обнимала правую сторону. И они уважают какой-то отступ или маржу на тексте. –

Хорошо, я смог сделать это без каких-либо дополнительных <span> или <div>, разделив псевдоэлементы и выравнивая их фон слева и справа соответственно. Тогда я в состоянии установить отступы по ширине фона, как так (например, имеет 5% заполнение с обеих сторон):

.section-heading { 
    display: table; 
    white-space: nowrap; 
} 

.section-heading:before { 
    background: linear-gradient(to bottom, black, black) no-repeat left center/95% 1px; 
    content: ""; 
    display: table-cell; 
    width: 50%; 
} 

.section-heading:after { 
    background: linear-gradient(to bottom, black, black) no-repeat right center/95% 1px; 
    content: ""; 
    display: table-cell; 
    width: 50%; 
}

demo here, спасибо всем за помощь!

источник

2013-10-01 10:32:51

Возможно, вам необходимо иметь внутреннюю обертку, обрабатывающую такую прокладку:

HTML:

<h2 class="section-heading"><div class="section-heading-padding">Example</div></h2>

CSS:

.section-heading { 
    display: table; 
    white-space: nowrap; 
} 

.section-heading-padding { 
    padding: 0 200px; 
} 

.section-heading:before, 
.section-heading:after { 
    background: linear-gradient(to bottom, black, black) no-repeat center/100% 1px; 
    content: ""; 
    display: table-cell; 
    width: 50%; 
}

Не совсем идеально, я полагаю. Надеюсь, кто-то может предоставить вам лучшее решение.

JSFiddle here.

EDIT: Я обновил это, чтобы иметь линии обнимают стороны.

Причина, по которой линии не обнимались, потому что их ширина была установлена на 90%. Я предполагаю, что это было потому, что он добавил прокладку вокруг текста; однако нежелательный побочный эффект заключался в том, что он также добавил прокладку вокруг внешних краев. Устанавливая их на 100% ширины, а затем с внутренней обработкой прокладки вокруг текста, похоже, дает желаемые результаты.

источник

2013-10-01 10:24:23 SombreErmine

вот мое решение, добавьте <span></span> внутри h2 элемента, а затем добавить отступ/маржу h2 span {}

http://jsfiddle.net/dASCv/7/

источник

2013-10-01 10:24:59 Arminmsg

Как это demo?

Тогда просто добавьте border-spacing к вашему section-heading

источник

2013-10-01 10:26:55