Pour mon nouveau site de promotions, j'avais pour ambition de mettre une ligne de date. Dans la précédente version c'était juste un gros mélange de toutes les publications.

L'idée était donc de réaliser un séparateur. Je le dis tout de suite, cette astuce n'est pas de mon fait, mais uniquement de recherche sur internet. C'est donc uniquement pour ma mémoire que j'écris ce mémo tuto.

La solution retenue est on ne peut plus simple et se compose d'une partie html et une partie CSS

La partie HTML

<div class="lignedateheader">
<p class="lignedatetext"> 2018-12-11 </p>
</div>

 La partie CSS

.lignedateheader {
  text-align: center;
  overflow: hidden;
  background: #FFF; /* couleur du fond */
  width : 100%;
}
.lignedatetext {
  display: inline-block;
  position: relative;
  border: solid 1px grey;
  border-radius : 20px;
  padding : 5px 10px 5px 10px;
}
.lignedatetext:after,
.lignedatetext:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 200%;
  top: 50%;
  right: 100%;
  background: black;
}
.lignedatetext:after { left: 100%; }

Le résultat en une image

Comments powered by CComment

We use cookies

Nous utilisons des cookies sur notre site web. Certains d’entre eux sont essentiels au fonctionnement du site et d’autres nous aident à améliorer ce site et l’expérience utilisateur (cookies traceurs). Vous pouvez décider vous-même si vous autorisez ou non ces cookies. Merci de noter que, si vous les rejetez, vous risquez de ne pas pouvoir utiliser l’ensemble des fonctionnalités du site.