「CSS」list-itemでマーカー用のボックスを表示する
環境
Google Chrome 103.0.5060.66（Official Build）
構文
display: list-item;
list-item キーワードは、要素に list-style プロパティで指定された内容を含む ::marker 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。
list-item キーワードは、要素に list-style プロパティで指定された内容を含む ::marker 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。
list-item キーワードは、要素に list-style プロパティで指定された内容を含む ::marker 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: list-item;
margin-left: 10px;
}
</style>
</head>
<body>
<p>マーカー用のボックスを表示するサンプル
<span>tokyo</span>
<span>oosaka</span>
<span>fukuoka</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: list-item;
margin-left: 10px;
}
</style>
</head>
<body>
<p>マーカー用のボックスを表示するサンプル
<span>tokyo</span>
<span>oosaka</span>
<span>fukuoka</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: list-item;
margin-left: 10px;
}
</style>
</head>
<body>
<p>マーカー用のボックスを表示するサンプル
<span>tokyo</span>
<span>oosaka</span>
<span>fukuoka</span>
</p>
</body>
</html>