前提・実現したいこと
SPで横並びリストのリストマークに虫眼鏡マークを使いたい
発生している問題
リストマークとして虫眼鏡マークが付けられず<li>の前に<div>で付けています。
右の余白が開きすぎる。
虫眼鏡マークににアンダーラインを付けないままにしたいです。
該当のソースコード
<ul class="top_keyword"> <div class="search_icon"></div><li><a href="#">AAA</a></li> <div class="search_icon"></div><li><a href="#">BBB</a></li> <div class="search_icon"></div><li><a href="#">CCC</a></li> </ul>.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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/04 13:42