Заголовки, выровненные по центру и обрамлённые линиями с двух сторон


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

Я уже отвечал, как сделать такую декоративную линию справа от текста, посмотрите там, как всё устроено.

Для отцентрированного текста мне не удалось найти надёжное решение в рамках одного тега — то Сафари сломается, то Эксплорер. Если добавить дополнительный 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>

Заголовки, выровненные по центру и обрамлённые линиями с двух сторон