2 Линии за заголовками CSS

Я хотел бы поставить 2 строки за мои заголовки на моем сайте. Я нашел CSS, чтобы поместить одну сплошную линию за текст, но мне бы очень хотелось иметь две строки за моим текстом разной ширины (один немного толще с пространством между ними).2 Линии за заголовками CSS

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

h1 { 
    position: relative; 
    font-size: 30px; 
    z-index: 1; 
    overflow: hidden; 
    text-align: center; 
} 
h1:before, h1:after { 
    position: absolute; 
    top: 51%; 
    overflow: hidden; 
    width: 50%; 
    height: 1px; 
    content: '\a0'; 
    background-color: red; 
} 
h1:before { 
    margin-left: -50%; 
    text-align: right; 
} 
.color { 
    background-color: #ccc; 
}

Вот HTML:

<h1>Header Title Goes Here</h1>

И если это не так просто, как только изменение этого кода, есть ли способ CSS я мог бы использовать для достижения этого эффекта?

источник

2013-10-03 nellygrl

Добавлен HTML! – nellygrl

Итак, в принципе, вы хотите, чтобы линия шла за текстом ..? Как .. http://jsfiddle.net/g7zSZ/? –

Не совсем. Я хочу, чтобы линия шла за текстом, например: http://jsfiddle.net/jxszY/1/ Но мне также понравилась бы вторая строка, немного толстая прямо под первой строкой. Таким образом, за текстом будет две строки. Я просто не знаю, как добиться этого эффекта. – nellygrl

В отличие от установки высоты/фона, вы можете вместо этого установить границу.

jsFiddle demo

Обновлено для отступов ..

Я добавил 2% я не знаю, если это достаточно, но вы можете просто изменить margin-left вы заметите разницу в 2%.

jsFiddle demo - с полями.

h1 { 
    position: relative; 
    font-size: 30px; 
    z-index: 1; 
    overflow: hidden; 
    text-align: center; 
} 
h1:before, h1:after { 
    position: absolute; 
    top: 40%; 
    overflow: hidden; 
    width: 50%; 
    height: 4px; 
    content: '\a0'; 
border-bottom: 3px solid red; 
    border-top: 1px solid red; 
} 
h1:before { 
    margin-left: -52%; 
    text-align: right; 
} 
h1:after { 
    margin-left:2%; 
    text-align:left; 
} 
.color { 
    background-color: #ccc; 
}

источник

2013-10-03 00:53:10

Третий пример идеален. Большое вам спасибо за вашу помощь! – nellygrl

@Noelle Рад, что это помогло. –

Не могли бы вы узнать, как добавить отступы по обеим сторонам слов, чтобы между буквами и линиями было немного больше места? Я попробовал добавить прописку, но она не работает. – nellygrl

2 Линии за заголовками CSS

ответ

Смежные вопросы