CSS List Item Vertical Alignment

Question

I came across what I think is a CSS issue today that I've never seen before:

These are two separate ordered lists. and on the second list, the number 1 is aligned to the bottom of the bullet point, rather than to the top, which is the only way I've ever seen it before (and which is what I want).

The code for these two lists is identical, except that the first has no anchor tag, while the second one does:

This is part of a post on a WordPress site and the main CSS file for this theme, when unminified, is thousands of lines long and is therefore somewhat overwhelming to me.

As I have never seen bullet points formatted like this, and wasn't even aware it could be done, can anybody point me to what CSS feature I should be looking for in the CSS file so I can top-align the number to the associated text?

Thanks!

==========

UPDATE:

I think this is the CSS block that is controlling this formatting:

body.single .single-inner-wrapper article#single-article .entry-content a {
    color: #41b5f9;
    position: relative;
    line-height: 1.2;
    display: inline-block;
    z-index: 1
}

Thanks for a suggestion by G-Cyr, I added a vertical-alignment:top to this section, and it appears to have moved the number on the second list from being bottom aligned to top aligned. where I want it.

Thanks to everybody who helped!

Answer 1

From MDN :

CSS counters let you adjust the appearance of content based on its location in a document.

Here's a short example showing how this would be used.

• Set default list-style to none
• Always reset the counter in the parent element
• Increment the counter number in each li
• Ensure li is relatively positioned
• Store the actual number plus the "." in pseudo element content
• Only show numbers for li s which are non-empty
• Style to your liking

 .my-list { counter-reset: my-list-title; list-style: none; max-width: 400px; } .my-list li { counter-increment: my-list-title; position: relative; } .my-list li:not(:empty)::before { content: counter(my-list-title) "."; position: absolute; bottom: 0; left: -1.2em; }

 <ol class="my-list"> <li>xxxx xxxx xxxxxxx xxxxxx xxxxx xxxxx xxxxxxx xxxxxx xxxxx xxxxx</li> <li>xxxx xxxx xxxxxxx xxxxxx</li> </ol>

jsFiddle

Answer 2

I think this is the CSS block that is controlling this formatting:

body.single .single-inner-wrapper article#single-article .entry-content a {
    color: #41b5f9;
    position: relative;
    line-height: 1.2;
    display: inline-block;
    z-index: 1
}

Thanks for a suggestion by G-Cyr, I added a vertical-alignment:top to this section, and it appears to have moved the number on the second list from being bottom aligned to top aligned. where I want it.

Thanks to everybody who helped!

Answer 3

I have achieved this with a very simple trick

https://codepen.io/h-sharma/pen/VwaJmPy

     <ol>
      <li>
       <div>
        Some text.....
       </div>
      </li>
     </ol>
     <style>
      li>div{
       display:inline-block;
       vertical-align:bottom;
      }
     </style>

 li>div{ display:inline-block; vertical-align:bottom; }

 <ol> <li> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, </div> </li> </ol>