html,cssでSP表示横並びリストのリストマークに虫眼鏡マークを使いたい

前提・実現したいこと

SPで横並びリストのリストマークに虫眼鏡マークを使いたい

発生している問題

リストマークとして虫眼鏡マークが付けられず<li>の前に<div>で付けています。
右の余白が開きすぎる。
虫眼鏡マークににアンダーラインを付けないままにしたいです。

該当のソースコード

.top_keyword{
display:table;
width: 100%;
margin: 5px 0 10px;
text-decoration: underline;
}

.top_keyword li{
display:table-cell;
padding-left:15px;
font-size: 12px;
}

.search_icon{
padding: 0;
color: #000;
position: absolute;
margin-left: 50px;
margin-top: -1px;
margin-left: -1px;
width: 8px;
height: 8px;
border: solid 1px currentColor;
border-radius: 100%;
-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}

.search_icon:before {
content: '';
position: absolute;
top: 7px;
left: 2px;
height: 6px;
width: 1px;
background-color: currentColor;
}

試したこと

ul li ：before などを使ってリストマークにしようとするとリストの文字も斜めになったりアンダーラインがはいったりします。
どうぞよろしくお願いします。

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

回答2件

ベストアンサー

ul要素の直下にはli要素しか置けないので文法的におかしいです。
「右の余白」はどの要素のどの部分かがわからないので無視。

HTML
1<ul class="top_keyword">
2<li><div class="search_icon"></div><a href="#">AAA</a></li>
3<li><div class="search_icon"></div><a href="#">BBB</a></li>
4<li><div class="search_icon"></div><a href="#">CCC</a></li>
5</ul>

CSS
1.top_keyword li{
2position: relative; /* ADD */
3display:table-cell;
4padding-left:15px;
5font-size: 12px;
6}
7
8.search_icon{
9left: 0; /* ADD */
10padding: 0;
11color: #000;
12position: absolute;
13margin-left: 50px;
14margin-top: -1px;
15margin-left: -1px;
16width: 8px;
17height: 8px;
18border: solid 1px currentColor;
19border-radius: 100%;
20-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
21}
22```**動くサンプル：**[https://jsfiddle.net/hsrbqtf9/](https://jsfiddle.net/hsrbqtf9/)

投稿2019/08/01 18:22

kei344

総合スコア69407

kone_ri

2019/08/04 13:42

たった2箇所の変更でそろえて頂きましてありがとうございます。 htmlそもそもの文法間違いのご指摘もありがとうございます。よく覚えて使うようにします。

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

まず右の余白が空きすぎる問題は

CSS
1.top_keyword li{
2display:table-cell;
3padding-left:15px;
4font-size: 12px;
5}

のpadding-left:15px;がおそらく問題。
質問者さんの挙動を叶えるには最低限の変更でやろうとすると

HTML
1<ul class="top_keyword">
2<li><div class="search_icon"></div><a href="#">AAA</a></li>
3<li><div class="search_icon"></div><a href="#">BBB</a></li>
4<li><div class="search_icon"></div><a href="#">CCC</a></li>
5</ul>

CSS
1.top_keyword{
2display:table;
3width: 100%;
4margin: 5px 0 10px;
5text-decoration: underline;
6}
7
8.top_keyword li{
9display:table-cell;
10font-size: 12px;
11}
12
13.search_icon{
14padding: 0;
15color: #000;
16position: absolute;
17margin-left: 50px;
18margin-top: -1px;
19margin-left: -12px;
20width: 8px;
21height: 8px;
22border: solid 1px currentColor;
23border-radius: 100%;
24-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
25}
26
27.search_icon:before {
28content: '';
29position: absolute;
30top: 7px;
31left: 2px;
32height: 6px;
33width: 1px;
34background-color: currentColor;
35}