How to Bold both number and list on HTML (OL LI) without getting the sub list getting affected?

TaniafauGuswanto
March 26, 2024
130 views
4 votes
4 Answers

I am trying to make a list like this picture, but I think I can’t get it right.

I was able to bold only the list but I couldn’t bold the number generated by using , also I want to know how to get the exact result on like on the picture.

Here is my code :

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

I am sorry if this question are confusing, because i cant explain it well

Answers

Style the ::marker and reset the ::marker in the sub-menus.

li::marker {
  font-weight: bold;
}

li li::marker {
  font-weight: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pertemuan 03</title>
  <style>
    body {
      font-family: sans-serif;
    }
    
    h4 {
      text-decoration: underline;
    }
    
    .italic {
      font-style: italic;
    }
    
    ul li,
    ol li {
      text-indent: 20px;
      padding-bottom: 3px;
    }
  </style>
</head>

<body>
  <h4>Menu:</h4>
  <ol>
    <li>
      <b>Makanan:</b>
      <ol type="A">
        <li>Nasi Kuning</li>
        <li>Nasi Uduk</li>
        <li>Nasi Goreng</li>
      </ol>
    </li>
    <li>
      <b>Lauk:</b>
      <ul type="disc">
        <li>Tahu Goreng</li>
        <li>Tempe Goreng</li>
        <li>Orek Tempe</li>
        <li>Cah Kangkung</li>
      </ul>
    </li>
    <li>
      <b>Sayur:</b>
      <ol type="a">
        <li>Sayur Asem</li>
        <li>Soto Ayam</li>
        <li>Sop Iga Sapi</li>
      </ol>
    </li>
    <li>
      <b>Minuman:</b>
      <ol type="A">
        <li>
          <i>Minuman Dingin:</i>
          <ol type="i">
            <li>Es Teh Manis</li>
            <li>Es Jeruk</li>
            <li>Es Campur</li>
          </ol>
        </li>
        <br>
        <li>
          <i>Minuman Panas:</i>
          <ol type="i">
            <li>Kopi Hitam</li>
            <li>Lemon Tea</li>
            <li>Hot Chocolate</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

Alternatively, you don’t need the <b> tags at all. Just reset the font-weight on the submenus.

ul li,
ol li {
  font-weight: bold;
}

li li {
  font-weight: normal;
}

body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ul li,
ol li {
  text-indent: 20px;
  padding-bottom: 3px;
  font-weight: bold;
}

li li {
  font-weight: normal;
}

<h4>Menu:</h4>
<ol>
  <li>
    Makanan:
    <ol type="A">
      <li>Nasi Kuning</li>
      <li>Nasi Uduk</li>
      <li>Nasi Goreng</li>
    </ol>
  </li>
  <li>
    Lauk:
    <ul type="disc">
      <li>Tahu Goreng</li>
      <li>Tempe Goreng</li>
      <li>Orek Tempe</li>
      <li>Cah Kangkung</li>
    </ul>
  </li>
  <li>
    Sayur:
    <ol type="a">
      <li>Sayur Asem</li>
      <li>Soto Ayam</li>
      <li>Sop Iga Sapi</li>
    </ol>
  </li>
  <li>
    Minuman:
    <ol type="A">
      <li>
        <i>Minuman Dingin:</i>
        <ol type="i">
          <li>Es Teh Manis</li>
          <li>Es Jeruk</li>
          <li>Es Campur</li>
        </ol>
      </li>
      <br>
      <li>
        <i>Minuman Panas:</i>
        <ol type="i">
          <li>Kopi Hitam</li>
          <li>Lemon Tea</li>
          <li>Hot Chocolate</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Now this code displays exactly the same as your picture

<!DOCTYPE html>
<html lang="en">

<head>
<title>Pertemuan 03</title>
<style>
body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ol {
    font-weight: lighter;
    
    

}

ul {
    font-weight: lighter;
    
}

.main-list{
    text-indent: 20px;
   
    
    

}
.main-list > li::before {
  content: none;
}

.main-list > li {
  font-weight: bold;
  padding-left: 16px;
  padding-bottom: 10px;
  
}
</style>
</head>

<body>
<h4>Menu:</h4>
<ol class="main-list">
 <li><b>Makanan:</b>
  <ol type="A">
    <li>Nasi Kuning</li>
    <li>Nasi Uduk</li>
    <li>Nasi Goreng</li>
  </ol>
 </li>
 <li><b>Lauk:</b>
   <ul type="disc">
    <li>Tahu Goreng</li>
    <li>Tempe Goreng</li>
    <li>Orek Tempe</li>
    <li>Cah Kangkung</li>
  </ul>
 </li>
 <li><b>Sayur:</b>
  <ol type="a" >
    <li>Sayur Asem</li>
    <li>Soto Ayam</li>
    <li>Sop Iga Sapi</li>
  </ol>
 </li>
 <li><b>Minuman:</b>
  <ol type="A">
    <li>
      <i>Minuman Dingin:</i>
      <ol type="i" >
        <li>Es Teh Manis</li>
        <li>Es Jeruk</li>
        <li>Es Campur</li>
      </ol>
    </li>
    <br>
    <li>
      <i>Minuman Panas:</i>
      <ol type="i" >
        <li>Kopi Hitam</li>
        <li>Lemon Tea</li>
        <li>Hot Chocolate</li>
      </ol>
    </li>
  </ol>
 </li>
 </ol>
 </body>

 </html>

- FatemehSatouri
- March 22, 2024 at 12:01 pm
- 0 votes
0
you can use Marker :::
The :: Marker CSS Pseudo-Element Selects The Marker Box of a List Item, which type of contains a bullet or number. IT WORKS on Any Element or Pseudo-Element Set to Display: List-Item, Such As The
And Elements.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Pertemuan 03</title>
    <style>
        body {
            font-family: sans-serif;
        }

        h4 {
            text-decoration: underline;
        }

        .italic {
            font-style: italic;
        }

        ul li,
        ol li {
            text-indent: 20px;
            padding-bottom: 3px;
        }

        /* marker and select li by class*/

        .bold::marker {
            color: rgb(7, 7, 7);
            font-weight: 900;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <h4>Menu:</h4>
    <ol id="ol">
        <li class="bold">
            <b>Makanan:</b>
            <ol type="A">
                <li>Nasi Kuning</li>
                <li>Nasi Uduk</li>
                <li>Nasi Goreng</li>
            </ol>
        </li>
        <li class="bold">
            <b>Lauk:</b>
            <ul type="disc">
                <li>Tahu Goreng</li>
                <li>Tempe Goreng</li>
                <li>Orek Tempe</li>
                <li>Cah Kangkung</li>
            </ul>
        </li>
        <li class="bold">
            <b>Sayur:</b>
            <ol type="a">
                <li>Sayur Asem</li>
                <li>Soto Ayam</li>
                <li>Sop Iga Sapi</li>
            </ol>
        </li>
        <li class="bold">
            <b>Minuman:</b>
            <ol type="A">
                <li>
                    <i>Minuman Dingin:</i>
                    <ol type="i">
                        <li>Es Teh Manis</li>
                        <li>Es Jeruk</li>
                        <li>Es Campur</li>
                    </ol>
                </li>
                <br>
                <li>
                    <i>Minuman Panas:</i>
                    <ol type="i">
                        <li>Kopi Hitam</li>
                        <li>Lemon Tea</li>
                        <li>Hot Chocolate</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</body>

</html>

The marker sees all the list-styles of your list.
Hope this answer has been useful to you.

To achieve the exact formatting as shown in the picture, you can modify your HTML code by adding some additional CSS styling. Below is the updated code with the necessary modifications:

body {
  font-family: sans-serif;
}

h4 {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

ul li,
ol li {
  text-indent: 20px;
  padding-bottom: 3px;
}

.list-number {
  font-weight: bold;
  margin-right: 5px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pertemuan 03</title>
  </head>
  <body>
    <h4>Menu:</h4>
    <ol>
      <li>
        <b>Makanan:</b>
        <ol type="A">
          <li>
            <span class="list-number">1.</span>Nasi Kuning
          </li>
          <li>
            <span class="list-number">2.</span>Nasi Uduk
          </li>
          <li>
            <span class="list-number">3.</span>Nasi Goreng
          </li>
        </ol>
      </li>
      <li>
        <b>Lauk:</b>
        <ul type="disc">
          <li>
            <span class="list-number">a.</span>Tahu Goreng
          </li>
          <li>
            <span class="list-number">b.</span>Tempe Goreng
          </li>
          <li>
            <span class="list-number">c.</span>Orek Tempe
          </li>
          <li>
            <span class="list-number">d.</span>Cah Kangkung
          </li>
        </ul>
      </li>
      <li>
        <b>Sayur:</b>
        <ol type="a">
          <li>
            <span class="list-number">i.</span>Sayur Asem
          </li>
          <li>
            <span class="list-number">ii.</span>Soto Ayam
          </li>
          <li>
            <span class="list-number">iii.</span>Sop Iga Sapi
          </li>
        </ol>
      </li>
      <li>
        <b>Minuman:</b>
        <ol type="A">
          <li>
            <i>Minuman Dingin:</i>
            <ol type="i">
              <li>
                <span class="list-number">1.</span>Es Teh Manis
              </li>
              <li>
                <span class="list-number">2.</span>Es Jeruk
              </li>
              <li>
                <span class="list-number">3.</span>Es Campur
              </li>
            </ol>
          </li>
          <br>
          <li>
            <i>Minuman Panas:</i>
            <ol type="i">
              <li>
                <span class="list-number">1.</span>Kopi Hitam
              </li>
              <li>
                <span class="list-number">2.</span>Lemon Tea
              </li>
              <li>
                <span class="list-number">3.</span>Hot Chocolate
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </body>
</html>

I made a .list-number class containing the list numbers to the elements.

I applied a CSS style to the list-number class to make the numbers bold and add a margin between the number and the list item text. This should give you the desired formatting for your list items, including bold numbers as shown in the picture.

Sorry if I didn’t answer it right but according to your question and my understanding, I think this should be the right answer…

Please signup or login to give your own answer.

Click here to cancel reply.