Можно ли это сделать с помощью CSS?

Question

Может ли строка, лежащая за текстом, выполнять только с помощью CSS?

Answer 1

Да.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

body { 
    background: #ccc; 
} 

h2 { 
    text-align: center; 
    display: table; 
    width: 100%; 
} 
h2 > span, h2:before, h2:after { 
    display: table-cell; 
} 
h2:before, h2:after { 
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center; 
    width: 50%; 
    content: ' '; 
} 
h2 > span { 
    white-space: nowrap; 
    padding: 0 9px; 
} 

JSFiddle

Source

Answer 2

Вот как вы могли бы сделать что-то подобное без изображений.

HTML:

<h1><span>Text Here</span></h1> 

CSS:

body, span { background: #ccc; } 

h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; } 

JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/

Answer 3

Да, может.

Нет изображений, нет таблиц, всего два элемента и простой CSS.

Вот скрипка, чтобы продемонстрировать это: http://jsfiddle.net/URrdP/

HTML:

<div> <span>Text Here</span> </div> 

CSS:

div { 
    font-size: 45px; 
    border: #EEEEEE inset 2px; 
    position: relative; 
    text-align:center; 
    height: 0px; 
} 
span { 
    position: relative; 
    top:-0.7em; 
    background: #CCCCCC; 
} 

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

Другим ключевым моментом является то, что внутренний элемент имеет сплошной цвет фона, иначе линия границы будет отображаться. Это означает, что техника будет работать только действительно, когда вы разместите ее поверх сплошного фона; помещая его поверх градиента или изображение может работать не так хорошо.

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

Граница CSS inset не может быть лучшим способом получить идеальное совпадение цветов для вас; если вам нужно более мелкомасштабное управление цветами, вы можете указать отдельные цвета для border-top и border-bottom.

Answer 4

Без версии изображений (я предпочел бы дисплей: настольный вариант, хотя)

CSS:

body 
{background:silver;} 

h1 
{text-align:center;color:white;font-weight:normal;position:relative; 
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif} 

h1::before, h1::after 
{width:100%;border-bottom:1px white solid;content:' '; 
position:absolute;top:50%;left:0;} 

h1::after 
{margin-top:-1px;border-color:gray} 

h1 > span 
{background:silver;position:relative;z-index:1;} 

HTML:

<h1> 
    <span> 
    Text Here<br> 
    On Multiple Lines too 
    </span> 
</h1> 

Демо: http://jsbin.com/uqexar/1/edit

Answer 5

Поскольку не было спецификации HTML, я добавил в пару span s

<h1> 
    <span class="wrapper"> 
    <span class="text">TEXT HERE</span> 
    <span class="line"></span> 
    </span> 
</h1> 

CSS:

h1 { 
    width:300px; 
    background:#dcdcdc; 
    padding:10px; 
    text-align:center; 
    color:#333; 
} 
.wrapper { 
    display:block; 
    position:relative; 
} 
.line { 
    display:block; 
    height:1px; 
    background:#cecece; 
    border-bottom:1px solid #e3e3e3; 
    width:100%; 
    position:absolute; 
    top:50%; 
    z-index:100; 
} 
.text { 
    z-index:200; 
    position:relative; 
    padding:10px; 
    background:#dcdcdc; 
    display:inline-block; 
} 

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

http://jsfiddle.net/3q5he/

Answer 6

Это может быть сделано с помощью одного элемента:

http://jsfiddle.net/Puigcerber/vLwDf/

<h1>Heading</h1> 

h1 { 
    overflow: hidden; 
    text-align: center; 
} 
h1:before, 
h1:after { 
    background-color: #000; 
    content: ""; 
    display: inline-block; 
    height: 1px; 
    position: relative; 
    vertical-align: middle; 
    width: 50%; 
} 
h1:before { 
    right: 0.5em; 
    margin-left: -50%; 
} 
h1:after { 
    left: 0.5em; 
    margin-right: -50%; 
} 

Происхождение: http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913