リスト先頭に画像配置がしたい

問題点

ハンバーガーメニュークリック時に表示されるリスト先頭に画像を配置したい（画像参照）のですが、配置すると下線がなくなって高さも揃いません

試したこと

liをdiv要素で囲み、クラス指定。
クラスに画像をCSSで挿入
※画像挿入方法はhtmlでも問題はありません

HTML
1<header>
2  <div class="hamburger-menu">
3    <input type="checkbox" id="menu-btn-check">
4    <label for="menu-btn-check" class="menu-btn"><span></span></label>
5    <!--ここからメニュー-->
6    <div class="menu-content">
7      <ul>
8        <div class="hair">
9          <li>
10            <a href="#">ヘア</a>
11          </li>
12        </div>
13        <li>
14          <a href="#">ヘアケア</a>
15        </li>
16        <li>
17          <a href="#">ライフスタイル</a>
18        </li>
19        <li>
20          <a href="#">トピックス</a>
21        </li>
22      </ul>
23    </div>
24    <!--ここまでメニュー-->
25  </div>
26</header>

CSS
1.menu-btn {
2  position: fixed;
3  top: 10px;
4  right: 10px;
5  display: flex;
6  height: 60px;
7  width: 60px;
8  justify-content: center;
9  align-items: center;
10  z-index: 90;
11  background-color: #666;
12}
13.menu-btn span,
14.menu-btn span:before,
15.menu-btn span:after {
16  content: "";
17  display: block;
18  height: 3px;
19  width: 25px;
20  border-radius: 3px;
21  background-color: #fff;
22  position: absolute;
23}
24.menu-btn span:before {
25  bottom: 8px;
26}
27.menu-btn span:after {
28  top: 8px;
29}
30
31/* クリックでバツ */
32#menu-btn-check:checked ~ .menu-btn span {
33  background-color: rgba(
34    255,
35    255,
36    255,
37    0
38  ); /*メニューオープン時は真ん中の線を透明にする*/
39}
40#menu-btn-check:checked ~ .menu-btn span::before {
41  bottom: 0;
42  transform: rotate(45deg);
43}
44#menu-btn-check:checked ~ .menu-btn span::after {
45  top: 0;
46  transform: rotate(-45deg);
47}
48
49#menu-btn-check {
50  display: none;
51}
52
53/* メニュー中身 */
54.menu-content {
55  width: 100%;
56  height: 100%;
57  position: fixed;
58  top: 0;
59  left: 0;
60  z-index: 80;
61  background-color: #ddd;
62}
63.menu-content ul {
64  padding: 70px 10px 0;
65}
66.menu-content ul li {
67  border-bottom: solid 1px #666;
68  list-style: none;
69}
70.menu-content ul li a {
71  display: block;
72  width: 100%;
73  font-size: 15px;
74  box-sizing: border-box;
75  color: #666;
76  text-decoration: none;
77  padding: 9px 15px 10px 0;
78  position: relative;
79}
80.menu-content ul li a::before {
81  content: "";
82  width: 7px;
83  height: 7px;
84  border-top: solid 2px #666;
85  border-right: solid 2px #666;
86  transform: rotate(45deg);
87  position: absolute;
88  right: 11px;
89  top: 16px;
90}
91
92/* ボタン押したらメニュー出る */
93.menu-content {
94  width: 100%;
95  height: 100%;
96  position: fixed;
97  top: 0;
98  left: 100%; /*leftの値を変更してメニューを画面外へ*/
99  z-index: 80;
100  background-color: #ddd;
101  transition: all 0.5s; /*アニメーション設定*/
102}
103
104#menu-btn-check:checked ~ .menu-content {
105  left: 0; /*メニューを画面内へ*/
106}
107
108/* リスト横アイコン */
109.hair {
110  background: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg)
111    no-repeat 0 0;
112  background-size: auto 20px;
113  padding-left: 30px;
114}
115

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

回答2件

まずHTMLでul直下にdivがあるのは違反だと思うのでやめたほうがいいです。

HTML
1      <ul>
2        <li class="hair">
3          <a href="#">ヘア</a>
4        </li>

そしてCSSは

CSS
1.hair {
2  background-image: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg);
3  background-repeat: no-repeat;
4  background-size: auto 20px;
5  background-position: 0 7px;
6  padding-left: 30px;
7}

位置はcenter指定もいいですけどこのように数値で微調整可能です。

投稿2022/01/06 02:59

itagagaki

総合スコア8402

ベストアンサー

.menu-content ul liのborder-bottomを消して.hairを以下にするとどうでしょうか？

CSS
1.hair {
2    background: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg) no-repeat 0 0;
3    background-size: auto 20px;
4    padding-left: 30px;
5    background-position-y: center;
6    border-bottom: solid 1px #666;
7}