28112 sujets

CSS et mise en forme, CSS3

Problème de retour à la ligne avec la propriété : content: '';

Bonsoir,

J'ai créé un titre h1 avec entre-tirets (un tiret à gauche et un autre à droite du titre).

Tout est parfait sauf pour les titres longs qui ne passent plus à la ligne et restent dans tous les cas sur une seule ligne.

De plus, le texte qui déborde est masqué à gauche et à droite.

Après quelques tests, il semble que ce soit la propriété content: ''; qui pose pb mais si je la supprime, plus de tirets Smiley ohwell

Mon code :
h1 {
    padding-bottom: 0.25em;
}
h1::before, h1::after {
    content: '';
    display: inline-block;
    width: 3%;
    vertical-align: middle;
    margin-top: 0 em; /*supprimer pour centrer en hauteur*/
    border-bottom: 1px solid #ae976d;
  }
h1::before {
    margin-left: -100%;
    margin-right: 1%;
  }
h1::after {
    margin-right: -100%;
    margin-left: 1%;
}


Je ne sais pas comment corriger ça Smiley ohwell
Bonjour.

À quoi servent ? :
h1::before {
    margin-left: -100%;
    margin-right: 1%;
  }
h1::after {
    margin-right: -100%;
    margin-left: 1%;
}


Chez moi, 'margin-left: -100%' fait disparaitre le titre sur la gauche... et si j'enlève ces deux règles, je ne constate pas le problème dont vous parlez (Mozilla Firefox 48)...
Il y a encore un truc qui m'échappe car cela ne fonctionne pas en l'état quand j'utilise votre code, mais en tout cas ce code règle les problèmes :
h1 {
  margin-bottom: 0.7em;
  text-align: center;
  overflow: hidden;
  position: relative;
}
h1::before,
h1::after {
  content: '';
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  margin-top: 0.3em;
  border-bottom: 0.15em solid Orange;
}
h1::before {
  margin-left: -100%;
  margin-right: 1%;
}
h1::after {
  margin-right: -100%;
  margin-left: 1%;
}

Exemple : CodePen
Merci beaucoup Smiley cligne , mais comme je souhaiterais obtenir une largeur fixe pour mes tirets (50px environ), si je passe width: 100% à 30%, le problème survient à nouveau quand mes titres sont sur deux lignes. Smiley ohwell
En fait, la solution se "cachait" dans les réglages. Bref, un très grand merci, comme d'habitude, aux super contributeurs d'Alsacréations !! Smiley biggrin Smiley cligne
Sujet clos
Aller à