Number in ordered list on its separate line?-CodePudding

How can I have the number on its separate line? I need this because I want to export the HTML to an EPUB and the screen space is limited, especially when I have four digit numbers it takes up horizontal space on the line.

All the items are English phrases with their phonetic transcription. So I have two paragraphs in each list item, one is the phrase itself and the other paragraph is the phonetic transcription.

<ol>
  <li>
     <p>Phrase</p>
     <p>Phonetic transcription</p>
  </li>

  <li>
     <p>Phrase</p>
     <p>Phonetic transcription</p>
  </li>
</ol>

I was wondering if it would be possible to put the number in a box, like specifying the four borders on it 1px solid #000; to make it look a little bit more stylish.

I think the easier path would be to not use an ordered list but in that case I need to insert the number manually and in case a phrase or two gets deleted updating the numbers will be hell. So, in my case an unordered list would work better. Right?

I would be grateful for any help.

CodePudding user response：

With the use of counter you don't have to insert the numbers manually, here is the code:

<ul>
    <li>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
    <li>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
</ul>

ul {
    counter-reset: item;
    list-style-type: none;
}

li::before {
    content: counter(item);
    counter-increment: item;
    border: 1px solid black;
}

EDIT: Counters don't work in EPUB. You have to write numbers manually:

<ul>
    <li>
        <span >1</span>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
    <li>
        <span >2</span>
        <p>Phrase</p>
        <p>Phonetic transcription</p>
    </li>
</ul>

ul {
    list-style-type: none;
}

.number {
    border: 1px solid black;
}