「CSS」list-itemでマーカー用のボックスを表示する

2022年7月4日

環境
Google Chrome　103.0.5060.66（Official Build）

構文
display: list-item;

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>

CSS

Posted by arkgame