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