Comment inverser l'ordre d'une liste à puces en HTML ?

Comment puis-je inverser l'ordre d'une liste à puces en HTML ?

L'affichage d'une liste à puces dans l'ordre inverse en HTML peut être réalisé à l'aide de techniques CSS. Pour faire pivoter la liste, vous pouvez transformer l'élément parent de 180 degrés et inverser la rotation des éléments enfants de -180 degrés.

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Vous pouvez également utiliser Flexbox et la propriété order :

ul {
    display: flex;
    flex-direction: row-reverse;
}
ul > li {
    order: -1;
}

Une autre approche consiste à utiliser un contre-incrément et un pseudo-élément. Bien que cette méthode n'inverse pas réellement l'ordre, elle produit un effet similaire en incrémentant le compteur dans l'ordre inverse :

ul {
    list-style-type: none;
    counter-reset: item 6;
}
ul > li {
    counter-increment: item -1;
}
ul > li:after {
    content: counter(item);
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!