list-style: square;の場所を変更したい

マーカーの位置をテキストの左横に持っていきたい。
※アンダーライン内に収めたい

html
1<ul class="sub-menu">
2        <h3 class="sub-title">カテゴリー</h3>
3        <li><a href="category.html">カテゴリー名</a></li>
4        <li><a href="category.html">カテゴリー名</a></li>
5        <li><a href="category.html">カテゴリー名</a></li>
6        <li><a href="category.html">カテゴリー名</a></li>
7      </ul>
8      <ul class="sub-menu">
9        <h3 class="sub-title">最近の投稿</h3>
10        <li><a href="singlepage.html">ページタイトル</a></li>
11        <li><a href="singlepage.html">ページタイトル</a></li>
12        <li><a href="singlepage.html">ページタイトル</a></li>
13        <li><a href="singlepage.html">ページタイトル</a></li>
14      </ul>

css
1
2.sub-title{
3    font-size: 1.375rem;
4    padding: 0px 8px 8px;
5    font-weight: normal;
6}
7.sub-menu{
8    margin-bottom: 60px;
9}
10.sub-menu li {
11    list-style: square;
12    list-style-position: inside;
13}
14
15.sub-menu a {
16    color: #432;
17    padding: 10px 0 10px 0;
18    display: block;
19    text-decoration: none;
20    border-bottom: solid 2px black;
21}
22

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

回答1件

ベストアンサー

aに当たっているborderとpaddingをliへ当てるように変更してあげるとか。
※お手数ですが、差分のチェックはセルフでお願いします※

CSS
1.sub-menu li {
2    list-style: square;
3    list-style-position: inside;
4    border-bottom: solid 2px black;
5    padding: 10px;
6}
7.sub-menu a {
8    color: #432;
9    text-decoration: none;
10}