Bonjour! =)

Tout est dit dans le titre... je cherche à placer, en HTML, CSS, ou avec des classes Bootstrap, un titre sur ma "border-top".
J'ai cherché mais pas trouvé grand chose de probant sur le net "sans doute pas les bons mots clé encore).

L'effet que je cherche à faire est le suivant : 

Salut

Je me souviens d'avoir vu un sujet comme celui-ci récemment dans ce forum mais je ne le retrouve plus...

Moi j'essaierais de "poser" le titre sur la bordure avec le positionnement absolu mais ça ne fonctionne pas si le fond doit être transparent au niveau du titre.

Bonjour,

Un exemple avec le pseudo-élément ::before :

http://jsbin.com/runelil/2/edit?html,css,output

<div class="test">Texte dans la div</div>

CSS

.test{
  border:5px solid darkred;
  margin-top:1rem;
  padding:1rem;
  position:relative;
  border-radius:5px;
}

.test::before{
  content:'Texte sur bordure';
  position:absolute;
  background-color:white;
  color:darkred;
  top:-1rem;
  font-size:2rem;
  line-height:1rem;
  padding:0 2px;
}

-
Edité par philiga 16 avril 2018 à 14:31:29