J’en causais dans un (vieux) billet, du style applicable aux listes de définition, en disant que je n’étais pas satisfait du résultat dans le thème Berlin, qui donne jusqu’à maintenant à peu près ceci :
Basique mais pas franchement sexy ; alors j’ai ressorti mes pinceaux numériques et j’arrive finalement à cela :
- 1er terme à définir (ligne commençant par un signe = suivi d’une espace)
- 1re définition (ligne commençant par un signe : suivi d’une espace)
- 2e définition
- 2e terme
- 3e terme
- Définition commune aux 2e et 3e terme
C’est mieux non ?
La CSS correspondante est la suivante :
dl {
display: flex;
flex-direction: column;
}
dt {
color: #fff;
background: #267daf;
padding: .25em .5em;
border-radius: .25em;
margin-bottom: .5em;
}
dd {
margin-left: 1em;
margin-bottom: .5em;
padding-left: 1em;
max-width: calc(100% - 2em);
}
dd::before {
content: "→ ";
margin-left: -1em;
}