[Résolu] Texte entre 2 traits

Bonjour,

Je ne sais pas comment ça s'appelle en français donc difficile de chercher sur les forums.
Je cherche à faire ceci :

--------------- Mon texte --------------------------

Sauf que ce ne sera pas tes tirets mais un traits continu.
Comment faire ?
Merci de votre aide et bonne journée !

Hello,

J'aurais bien fait ça avec des pseudos-éléments :

<p>Kiwi Party</p>

p:before, p:after { content:''; display:inline-block; vertical-align: middle; width: 2rem; height: 1px; background: #000 }
p:before { margin-right: .3rem }
p:after { margin-left: .3rem }

démo
Modifié par Kowo (11 Mar 2015 - 11:28)

Bonjour,

Le sujet a déjà été abordé plusieurs fois ici mais à chaque fois les réponses sont des liens mort...

Il y a plusieurs façon de réaliser ça. Le cas le plus simple étant si tu as un fond uni (= pas besoin de transparence derrière le titre). Et je pense qu'il faudra passer par un span. Sinon pour le trait tu as l’embarras du choix avec des choses plus ou moins propres selon tes gouts : box-shadow, border, before ou after...

voici quelques tests : http://jsfiddle.net/Undless/ncunnqpf/3/

<h1 class="un"><span>titre</span></h1>
<h1 class="deux"><span>titre</span></h1>
<h1 class="trois"><span>titre</span></h1>
<h1 class="quatre"><span>titre</span></h1>

h1{
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
h1 span{
    background-color:#fff;
    padding:0 10px;
}
.un{
    line-height:30px;
    box-shadow:0 16px 0 0 #fff inset, 0 17px 0 0 red inset;
}
.deux::before,
.trois::before{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    z-index:-1;
}
.deux::before{    
    top:50%;
    height:1px;
    background-color:blue;
}
.trois::before{    
    top:0;
    height:50%;
    border-bottom:1px solid green;
}
.quatre{
    border-bottom:1px solid pink;
    margin-bottom:30px;
}
.quatre span{
    position: relative;
    top: 15px;
}

Après si tu a besoin d'une vraie transparence sous le texte ça sera un peu plus tendu, tu pourrais mettre un before et un after respectivement à gauche et a droite de ton span, les faire dépasser du parent et mettre un overflow:hidden; sur le parent..

J’espère que tu auras assez de piste.

Bonne journée !

Merci ! Je vais regarder vos réponses de près

La solution avait occasionné un petit concours sur le blog de Raphaël Goetter. Malheureusement elle n'est plus dans sa version actuelle mais dans ses archives : http://goetter.fr/tumblr-backup/ (rechercher "T'es as cap ! ")

Le concours empêchait les solutions à base d'élément ajoutés dans le html ou dépendantes de la couleur de fond (si ce n'est pas une obligation d'éviter cela c'est parfois plus simple)

Je remet les solutions trouvées:
–––––––––––––––––––––––
Citation: Raphaël Goetter:

Au final, la réponse la plus cohérente, proposée par une large majorité, est fondée sur le principe général suivant (en gros) :

h1 en display: inline-block et positionné en relatif
:before / :after positionnés en absolute
height: 1px ou border-top: 1px
largeur de 100% voire 200%, voire 9999px
puis décalage du :before ou :after soit via margin-left: -100%, soit via left: -100%

Cette technique fonctionne en général à partir d’IE8 (et le reste du monde)

Une des version la plus aboutie (selon moi) de cette technique a été proposée par @HugoGiraudel :

body {
    text-align: center;
    overflow: hidden;
    background: #bada55;
}
h1 {
    display: inline-block;
    position: relative;
}
h1:after,
h1:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 200%;
    top: 50%;
    right: 100%;
    background: black;
}
h1:after { left: 100%; }

Inconvénients généraux de cette technique :

overflow: hidden sur body (pas très recommandé)
ne fonctionne plus si le titre passe sur 2 lignes
les barres ne sont pas vraiment “infinies” (par exemple avec une police petite)

Voici une version améliorée par @piouPiouM :

body {
  background-color: #B0CE50;
}
h1 {
    position: relative;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: #000;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}

Cette version s’affranchit du overflow: hidden sur body et permet d’avoir des barres infinies.

Alternative par @jbcordina :

h1{
    position: relative;
    text-align: center;
    line-height: 100%;
    overflow:hidden;
    font-size: 3em;
}
h1:before, h1:after{
    content :".";
    border-bottom: solid 1px #000;
    position: absolute;
    line-height: 50%;
    width: 100%;

}
h1:before{
    margin-left: -100%;
}

Autre alternative par @idsquare :

body {
    background-color: green;
    position:absolute;
    top:50%;
    left:0; right:0; bottom:0; margin:0;
    border-top:2px solid black;
    text-align:center;
    padding-top:-2em;
}
h1 {
    background-color:inherit;
    display:inline;
    font-size:2em;
    position:relative;
    margin:0;
    top:-0.7em;   
}

Voici ce que j’avais en tête de mon côté au départ du défi :

h1 {
  display: table;
  white-space: nowrap;
  text-align: center;
}
h1:before, h1:after {
  content: "";
  display: table-cell;
  width: 50%;
  background: linear-gradient(#000, #000) repeat-x left center;
  background-size: 1px 1px;
}

Ma proposition n’est pas compatible IE8 en l’état en raison du gradient CSS3.

Pour assurer la compatibilité antérieure, rien n’empêche d’utiliser une image de fond ou du base64 (mais c’est moins sexy), et je le prouve…

Ce qui donne au final :

h1 {
  display: table;
  white-space: nowrap;
  text-align: center;
}
h1:before, h1:after {
  content: "";
  display: table-cell;
  width: 50%;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=) repeat-x left center;
}

Voir en ligne : mort

/fin de citation
–––––––––––––––––––––––

Effectivement c'était ça, j'avais pas réussi à remettre la main dessus. Merci kustolovic !

Re

J'ai appliqué la méthode de @piouPiouM et ça marche nickel.
Cependant, j'ai besoin de votre aide car je ne comprend pas trop cette css, il faudra que je creuse plus tard.

- Je voudrais ajouter un espace de 13 px entre la barre et mon texte à gauche et idem à droite du texte. (j'ai réussi à gauche en mettant 52% au lieu de 50 à margin-left mais je n'arrive pas à le faire à droite).
- Je voudrais raccourcir le trait de 10 px à droite.

Merci de votre aide