border-bottomを文字幅にする

Question

```

<nav>
        <ul>
            <li class="one">Coca Cola</li>
            <li class="two">Orange Juice</li>
            <li class="three">Lemmon Juice</li>
            <li class="four">Pirukuru</li>
        </ul>

    display: inline-block;
    list-style:none;
    
   
}

.one {
    border-bottom:2px solid lightcoral;
}

.two {
    border-bottom:2px solid orange;
}

.three {
    border-bottom:2px solid yellow;
}

.four {
    border-bottom:2px solid chocolate;
}

nav li に　display:inline-block; を指定したのですが、border-bottomが文字幅になりません。
どうすれば、なりますでしょうか。

Comments

[m.ts10806]

マークダウンのcodeおかしくなってるので質問編集して調整してください（できれば投稿前にプレビュー確認を）

[K_3578]

何度も何度も指摘していますが無視されるようなので再び指摘します。

前の質問解決せずにどんどん新規質問するのはやめてください。回答を得られなかったからのは
質問者氏の質問の仕方に不備があることを理解してください。
不備がなければこのように追記修正依頼はされていません。

[m.ts10806]

CSSの構文ミスで困ってないなら半端なコード提示しないでください。見ている方は提示された内容が全てなので、そこから指摘しなければなりません。見ているのは赤の他人です。
どんな熟練者でも相手が本当はどうなってるか察することはできません。

Answer 1

border-bottomが文字幅になりません

ボーダーの太さを文字幅にする、ということならこうですね。

border-bottom:1em solid lightcoral;

文字高さという意味なら、現状のCSSで有効な方法はないです。（特に、アセンダー・ディセンダー周り）