チェックの印は ::before（丸）と ::after（レ点）で描いています。
LIST
リスト（箇条書き）のCSS素材
箇条書きの <ul> <ol> を見やすくするデザインです。行を足すだけで項目を増やせます。
11種類
<ol> の番号を CSS の counter で丸の中に出しています。項目を足すと番号も増えます。
関連ページへのリンク集向けです。マウスを乗せると矢印が少し右へ動きます。
メニューの値段表のように、項目と値の間を点線でつなぎます。値は <span> に入れます。金額は例です。
grid で2列にしています。幅が狭いと自動で1列になります。項目の間には細い下線が入ります。
アイコンは短いインラインSVGです。左の見出し（<b>）と内容を並べています。
<dl> の <dt>（用語）と <dd>（説明）を左右に並べます。スマホ幅では上下に並びます。
左が「よい例」、右が「よくない例」です。スマホ幅では上下に並びます。見出しの文字は自由に変えられます。
番号は counter で自動で振っています。見出し（<b>）と説明を組み合わせる、読みものに向いたリストです。
<li> の中にもう1つ <ul> を入れると、線でつながった下の階層になります。サイトマップやメニューの一覧に向きます。
強調したい言葉を <mark> で囲むと、下半分に蛍光ペンのような線が入ります。