Линия :before у заголовка всегда над ним,как изменить z-index?

Question

[VPVPVP]

Линия :before у заголовка всегда над ним,а не под,как сделать чтоб линия была как бы
z-index :1;
а заголовок
z-index: 2; ?
Чтоб полоска была на заднем плане
Пробовал z-index,помогает только если элементу before поставить -1 ,но в таком случае если у DIV есть бекграунд,этот before находиться под ним и его вовсе невидно.

<h2 style="text-align: center" class="vc_custom_heading title-main">Партнёры</h2>

h2.vc_custom_heading.title-main:before {
    position: relative;
    width: 340px;
    transform: skew( 
345deg
 );
    height: 29px;
    content: "";
    bottom: 0;
    display: block;
    top: 61px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #D8B46D;
}

Comments

[ForSureN1]

так дайте бэграунду индекс -999
бифору -1, а тексту 1 и будет вам счастье

[VPVPVP]

Евгений Бабенко, так в таком случае весь DIV становится не кликабельным

[ForSureN1]

VPVPVP, стесняюсь спросить для чего кликать по диву ?

Answer 1

[andand44]

Нужна дополнительная обертка для текста. span подойдет в данном случае
https://jsfiddle.net/hyg2q64c/

Comments

[Ankhena]

Не могу спокойно смотреть, когда для этого делают никому не нужные обертки.

https://jsfiddle.net/zvgcm90q/

Answer 2

[Икотий Айтишевич]

Надо тегам задать position, тогда z-index будет работать.