Последнее время довольно часто вижу в дизайне сайтов заголовки, выровненные по центру и обрамлённые линиями с двух сторон. Интересно, а можно ли сделать это, используя лишь один тег?
Я уже отвечал, как сделать такую декоративную линию справа от текста, посмотрите там, как всё устроено.
Для отцентрированного текста мне не удалось найти надёжное решение в рамках одного тега — то Сафари сломается, то Эксплорер. Если добавить дополнительный span, получится так:
<style> h1 { position: relative; overflow: hidden; font-size: 24px; font-weight: normal; text-align: center; } h1 > span { display: inline-block; margin: 0 .4em; } h1 > span:before, h1 > span:after { content: ''; position: absolute; width: 100%; border-top: 2px solid #4e4e4e; margin-top: .6em; } h1 > span:before { margin-left: -102%; } h1 > span:after { margin-left: 2%; } </style> <h1><span>Рекомендуем</span></h1>
или так (демо)
А еще можно сделать с бэкграунд-фото вместо линии, код будет выглядеть вот так:
.widget-heading { color: #161616; font-size: 2em; letter-spacing: 2px; margin-bottom: 20px; overflow: hidden; text-align: center; text-transform: uppercase; } .widget-heading > span { display: inline-block; position: relative; } .widget-heading > span:before, .widget-heading > span:after { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSIxMiIKICAgaGVpZ2h0PSIxMiIKICAgaWQ9InN2ZzIiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0Ij4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50Mzc3MSI+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc3MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3ODEiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNjMGM1Y2U7c3RvcC1vcGFjaXR5OjEiCiAgICAgICAgIG9mZnNldD0iMC4wNSIgLz4KICAgICAgPHN0b3AKICAgICAgICAgaWQ9InN0b3AzNzc5IgogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojYzBjNWNlO3N0b3Atb3BhY2l0eTowIgogICAgICAgICBvZmZzZXQ9IjAuMDUiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4MyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MCIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NSIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wMzc4NyIKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2MwYzVjZTtzdG9wLW9wYWNpdHk6MSIKICAgICAgICAgb2Zmc2V0PSIwLjE1MDAwMDAxIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDM3NzUiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmZjkwMjM7c3RvcC1vcGFjaXR5OjAiCiAgICAgICAgIG9mZnNldD0iMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTA0MC4zNjIyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDAsMTA0MC4zNjIyIDEsMCAtMSwxIHoiCiAgICAgICBpZD0icGF0aDM3OTEiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMCwxMDQ0LjM2MjIgMCwxIDUsLTUgLTEsMCB6IgogICAgICAgaWQ9InBhdGgzNzk1IgogICAgICAgc3R5bGU9ImZpbGw6I2MwYzVjZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDxwYXRoCiAgICAgICBkPSJtIDgsMTA0MC4zNjIyIC04LDggMCwxIDksLTkgeiIKICAgICAgIGlkPSJwYXRoMzc5OSIKICAgICAgIHN0eWxlPSJmaWxsOiNjMGM1Y2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8cGF0aAogICAgICAgZD0iTSAxMiwwIDAsMTIgMSwxMiAxMiwxIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzAiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gNCwxMiAxLDAgNywtNyAwLC0xIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzIiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gOCwxMiA0LC00IDAsMSAtMywzIHoiCiAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwNDAuMzYyMikiCiAgICAgICBpZD0icGF0aDM4MzQiCiAgICAgICBzdHlsZT0iZmlsbDojYzBjNWNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogIDwvZz4KPC9zdmc+Cg==") repeat-x scroll center center rgba(0, 0, 0, 0); border-left-color: #d8d8d8; border-right-color: #d8d8d8; border-top-color: #d8d8d8; content: ""; height: 10px; margin: 0 14px; position: absolute; top: 40%; width: 100%; } .widget-heading > span:before { right: 100%; } .widget-heading > span:after { left: 100%; } <h4 class="widget-heading"><span>Test lkjsdfkln sdfasdfsd asdfsadfasdf afdg</span></h4>