[Résolu] Traits de part et d'autre d'un titre avec pseudo éléments

Bonjour,

Je voudrais styler mes h2 avec des traits de part et d'autres, cf image ci-jointe.
J'ai trouvé le bout de code suivant mais la largeur fixe ne me convient pas. Je voudrais que la largeur des traits s'ajuste en fonction de la taille de mon h2 qui change selon les pages mais que le trait doré s'arrête 20 px avant la largeur de mon container.



Voici le code que j'ai trouvé :

h2 {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
h2:after {
    display: inline-block;
    margin: 0 0 2px 20px;
    height: 4px;
    content: " ";
    text-shadow: none;
    background-color: #e1c042;
    width: 250px;
}
h2:before {
    display: inline-block;
    margin: 0 20px 2px 0;
    height: 4px;
    content: " ";
    text-shadow: none;
    background-color: #e1c042;
    width: 250px;
}

Merci de votre aide et bonne journée,
Marine

Salut,

J'ai pas le temps de faire une démo mais le même principe avec du grid ou du flex ca sera nickel (mais il faudra un parent)

Hello,
Déjà abordé pas mal de fois sur le forum… Je ne parlerai pas de l'auteur de la question

Excellent lolll comme quoi ça a du mal à rentrer, je vais regarder ça... à nouveau

Yordi a écrit :
Hello,
Déjà abordé pas mal de fois sur le forum… Je ne parlerai pas de l'auteur de la question

HAHAHAHAHAHAHA

Bon bah du coup j'ai quand même fait mon test avec du flex parceque je l'avais pas fait dans l'autre sujet (2015 quand même). Je trouve ça plus flexible (hehehe) et ça marche sans wrapper apparemment : https://jsfiddle.net/sbe15rqn/5/

Merci Laurent !
2015, j'ai qq excuses

_laurent a écrit :
Bon bah du coup j'ai quand même fait mon test avec du flex parceque je l'avais pas fait dans l'autre sujet (2015 quand même). Je trouve ça plus flexible (hehehe) et ça marche sans wrapper apparemment : https://jsfiddle.net/sbe15rqn/5/

Ok, ça vaut le coup pcq c'est très clean avec flex cette année Vivement dans 2 ans

Merci beaucoup Messieurs, implémenté en 2 sec A bientôt