ul内のリストと文字を横並びにした時のリストの文字のみ背景を付ける方法

ul内のリストを横並びにして、リストの文字幅のみに背景を付けたいです。
inline-blockを使用したときに以下の画像のようになってしまうため対処方法を教えてほしいです。

※この「ああああああああ」や「aaaaaaaaaaa」のようなリスト文字の部分にのみ背景を付けたいです。
現在のコードは以下の物です。

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>例</title>
6<meta name="description" content="例">
7<link rel="stylesheet" href="例.css">
8</head>
9<body>
10  <h1>例</h1>
11  <ul>
12      <li>ああああああああ</li>
13      <p>ああああああああああああああああああああああああああ<br>
14      ああああああああああああああああああああああああああ<br>
15      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<</p>
16
17      <li>aaaaaaaaaaaaaa</li>
18      <p>ああああああああああああああああああああああああああ<br>
19      ああああああああああああああああああああああああああ<br>
20      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
21  </ul>

css
1li{
2  background-color:yellowgreen;
3  color: white;
4  display:inline-block;
5  font-size: 30px;
6  font-weight: bold;
7}
8ul{
9  display: grid;
10  grid: auto-flow / 450px 1fr;
11  padding-top:30px;
12

回答お願いします。

行動規範の内容に同意します

回答1件

まず、質問の回答ではないですが、UL要素の子要素にP要素を置くのは文法違反です。
div要素など変更すること検討ください。
内容的には、div内にh要素 p要素または、 dl dt dd が相応しいように思います。

<dl>: 説明リスト要素 - HTML: HyperText Markup Language | MDN

質問については、テキスト部分をspan要素で囲んで、それに背景色をつけるといいでしょう。

dl dt dd に書き換えた場合の例

html
1<h1>例</h1>
2<dl>
3  <dt><span>ああああああああ</span></dt>
4  <dd>ああああああああああああああああああああああああああ<br>
5    ああああああああああああああああああああああああああ<br>
6    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<</dd>
7
8  <dt><span>aaaaaaaaaaaaaa</span></dt>
9  <dd>ああああああああああああああああああああああああああ<br>
10    ああああああああああああああああああああああああああ<br>
11    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</dd>
12</dl>

css
1dt span{
2  background-color:yellowgreen;
3  color: white;
4  font-size: 30px;
5  font-weight: bold;
6}
7dl{
8  display: grid;
9  grid: auto-flow / 450px 1fr;
10  padding-top:30px;
11}