ul liの箇条書きの点と本文の余白を狭くしたい

前提・実現したいこと

リストの箇条書きの点と、本文の余白を狭くしたいです。
下記はサンプルです。
JSBin

発生している問題・エラーメッセージ

箇条書きの点と本文の余白を、希望の余白に設定できていないです。

該当のソースコード

html
1<body>
2  <ul>
3    <li>あいうえお</li>
4    <li>かきくけこ</li>
5  </ul>
6</body>

css
1ul {
2  border: 1px solid;
3}

試したこと

Chromeのデベロッパーツールでli要素を確認したところ、liの左側にpaddingはありませんでした。

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

回答2件

hatena19さんと考え方は同じですが、svgで無理やりサークルを書くとこうです

css
1ul{list-style:none;padding-left:25px;}
2li::before{
3content:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjEwIj48Y2lyY2xlIGN4PSIzLjUiIGN5PSI1IiByPSIzLjUiIC8+PC9zdmc+);
4}

投稿2020/12/02 03:36

yambejp

総合スコア116694

yambejp

2020/12/02 03:39 編集

スタティックに埋め込んでますが、実際にはテキストのsvgを encodeURIComponent→unescape→btoaすれば得られますまたsvgなので丸でなくても好きな形を指定できます

yambejp

2020/12/02 03:40

ちなみにもとのsvgはこんな感じ <svg xmlns="http://www.w3.org/2000/svg" width="7" height="10"><circle cx="3.5" cy="5" r="3.5" /></svg>

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

ベストアンサー

JSBinのコードでは padding-left: 0; で最小にしているので、それ以上狭めるのは既定の点では無理だと思います。list-style: none; で点を非表示にして、疑似要素で点を表示させる方法になると思います。

コード例

css
1ul {
2  border: 1px solid;
3  padding-left: 1rem;
4  list-style: none;
5}
6ul li {
7  position: relative;
8}
9ul li::before {
10	content: '';
11	display: block; 
12	position: absolute; 
13	background-color: black;
14	width: .3em;
15	height: .3em; 
16	top: .6em; 
17	left: -.6em; 
18	border-radius: .3em;
19}