Texte entre deux traits : affiner les réglages

Houlà ! Ça fait beaucoup de !important tout ça... et puis la position en absolute ça me semble foireux. Une solution en inline-block avec border-bottom pour que ça marche dans tous les cas de figure : CodePen (je l'utilise depuis longtemps sur mon framework).

Le code :

.emphasized {
  margin-bottom: 0.7em;
  text-align: center;
}
@media (max-width: 30rem) {
  .emphasized {
    padding-bottom: 0.25em;
    border-bottom: 0.15em solid Orange;
  }
}
@media (min-width: 30rem) {
  .emphasized {
    overflow: hidden;
    position: relative;
  }
  .emphasized::before,
  .emphasized::after {
    content: '';
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin-top: 0.3em;
    border-bottom: 0.15em solid Orange;
  }
  .emphasized::before {
    margin-left: -100%;
    margin-right: 1%;
  }
  .emphasized::after {
    margin-right: -100%;
    margin-left: 1%;
  }
}

Les médias queries c'est pour annuler le code si écran trop petit (l'effet fonctionne mais je trouve que ce n'est "pas beau" sur petits écrans).
Modifié par Olivier C (23 Jan 2017 - 21:33)

Merci pour ton retour !

Pour les !important, c'est que je travaille à partir d'un thème et j'en case un systématiquement pour être sûr que mes changements de classe deviennent prioritaires, par orthodoxe mais efficace.

Et j'avoue que je ne m'étais pas posé la question des médias queries et du rendu sur petit écran. Cela dit, le style recherché se limite quand même à la valeur de deux petits tirets simples et discrets et pas un gros filet épais de part et d'autre.

J'ai testé ton code, très bien sauf que vertical-align : middle; ne fonctionne pas (même avec un !important , les tirets restent collés en pied... mais j'ai peut-être pas tout compris.

Avec les petites modifs, j'en suis là :

h1 {
  margin-bottom: 0.7em;
}
@media (max-width: 30rem) {
  h1 {
    padding-bottom: 0.25em;
    border-bottom: 0.15em solid Orange;
  }
}
@media (min-width: 30rem) {
  h1 {
    overflow: hidden;
    position: relative;
  }
h1::before, h1::after {
    content: '';
    display: inline-block;
    width: 3%;
    vertical-align: middle;
    margin-top: 0.3em;
    border-bottom: 1px solid white;
  }
h1::before {
    margin-left: -100%;
    margin-right: 1%;
  }
h1::after {
    margin-right: -100%;
    margin-left: 1%;
  }
}

goudurisc a écrit :
J'ai testé ton code, très bien sauf que vertical-align : middle; ne fonctionne pas (même avec un !important , les tirets restent collés en pied... mais j'ai peut-être pas tout compris.

C'est normal, je l'ai conçus pour qu'il ait ce comportement. Les traits sont liés à des pseudo-éléments, ils se comportent donc comme tel. Leur hauteur est définie par un margin-top. Si vous voulez center les traits en hauteur il vous suffit donc de supprimer cette ligne :

/* margin-top: 0.3em; */

Vous aurez ainsi ce comportement : CodePen
Modifié par Olivier C (25 Jan 2017 - 06:08)

Merci c'est parfait !!!
Mais du coup, à quoi sert vertical-align: middle; ????

goudurisc a écrit :
Merci c'est parfait !!!
Mais du coup, à quoi sert vertical-align: middle; ????

à ça : http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-texte.html

Si tu n'as rien contre l'usage de flex, cela va te facilité grandement la tâche, voir te passer des mediaqueries (si'il ny a pas de place, alors les traits disparaissent d'eux mêmes).

h1 {
    display:flex;
}
h1:before, h1:after {
  content:'';
  flex:1;
  border-bottom:1px white solid;
  margin:auto 0.5em;  /* auto = marge vertical, un enfant  flex se centre verticalement , 0.5em = marge latérales pour se cecoller des bords et du texte */
}

Le centrage se fait autant verticalement qu'horizontalement avec la valeur auto si celle-ci est appliqué à deux cotés opposés.

Ensuite pour le style, tu peut faire http://codepen.io/gc-nomade/pen/xgXzpr n'importe quoi ou pas.
Modifié par gcyrillus (26 Jan 2017 - 20:58)