Skip to main content

Reversed Ordered List - HTML


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default, to make number descending order add attribute reversed in ol element.

DEMO

  1. Creeping Death (Ride The Lightning, 1984)
  2. Master Of Puppets (Master Of Puppets, 1986)
  3. One (…And Justice For All, 1988)
  4. For Whom The Bell Tolls (Ride The Lightning, 1984)
  5. Battery (Master Of Puppets, 1986)

HTML

<ol reversed>
  <li>Creeping Death (Ride The Lightning, 1984)</li>
  <li>Master Of Puppets (Master Of Puppets, 1986)</li>
  <li>One (…And Justice For All, 1988)</li>
  <li>For Whom The Bell Tolls (Ride The Lightning, 1984)</li>
  <li>Battery (Master Of Puppets, 1986)</li>
</ol>

Comments

Popular posts from this blog

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }