CSS

HTML ul ol liタグで作る箇条書きリスト使い方の基本

箇条書きリスト作成の基本の基本

箇条書きを作るタグにはul・li、　ol・liの組み合わせがあって。
それぞれセットで使われます。

ulはUnordered List（順序のない箇条書き）の略。

olはOredered List（順序ありの箇条書き）の略

liはList Itemの略

番号無しはul

ulタグでliリストを囲みます。

ul・liを簡単にHTMLで記述をしてみます。

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>

</ul>

ブラウザ表示

番号ありはol

olタグでliリストを囲みます。

<ol>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>

</ol>

ブラウザ表示

リストタグにリストタグを入れ子にする

なおulとolで挟んだ中の入れ子にはliしかいれてはいけないことに注意。
Pタグなどは入りません。

もし入れるとすればliタグの中に入れるしかありませんが。
pタグなど、ブロックを形作るタグの場合、リストが崩れます。

<ol>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5<p>pタグのテキストを入れてみました</<p></li>

</ol>

span タグなどインラインのタグであれば大丈夫です。

	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5<span>spanタグのテキストを入れてみました</span></li>

</ol>

インライン要素とブロックレvベル要素については以下の記事などを御覧ください。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

しかし、複数のol,ulを入れ子にすることはできます。

例えばさきほどのHTMLにulタグに入れ子を挿入してみます。

<ol>

　　　　 <li>リスト1</li>
	<li>リスト2</li>
	<ul>
		<li>小リスト１</li>
		<li>小リスト2</li>
		<li>小リスト3</li>
	</ul>
	<li>リliスト3</li>
	<li>リスト4</li>
	<li>リスト5<span>spanタグのテキストを入れてみました</<span></li>

</ol>

ブラウザ表示

リストのコンテンツ部分を改行する

リスト5の部分がが長いので改行をしたいというような場合。

例えば上のHTML の記述を若干変えて。

<li>リスト5<span class="new-line">sdisplay:blockを使ってpanタグのテキストを入れてみました</span></li>

spanにclass=”new-line”と　目印ををつけました。

CSSで以下の様に指定します。

.new-line{
	display:block;
}

すると以下のようにブラウザ表示されます。

ただ一つのリストだけ改行したいなどという場合には
もっと簡単にHTMLの改行したい部分に<br>という改行タグを付ければその部分が改行されます。
spanタグを取っ払って

<li>リスト5　display:blockを使わないで<br>brタグのテキストに改行を入れてみました</li>

としCSSをいじる必要はありません。

ブラウザ表示

リストを横並びにする

また関連性・規則性のある要素（画像など）であればul ol liタグは箇条書きだけでなく。
スライドショーとか、フォトギャラリーなどにも使われます。
またナビゲーションなんかでは定番で使われます。

横並びにさせるのはとても簡単で。
display: inline-block;

を使うと

<<ul>
	
	<li>リスト1</li>
	<li>リスト2</li>	
	<li>リlスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>

</ul>

CSS

li {
  display: inline-block;
}

ブラウザ表示

floatプロパティでも同じようにできますが。
ちと面倒なのでdisplay: inline-block;のほうが楽かと思います。横並びについての詳しいことは後半に書いておきます。

箇条書きをCSSで装飾・・基本

デフォルトでもそれなりに使えますが、もう少し手を加えるとリストはもっと見栄えが良くなります。

装飾をHTMLに直接書き込むこともできますが
変更が面倒なので外部CSSを使うのが便利です。
CSSについてよくわからないという方は以下の記事など参考にしてください。

CSS最低の書き方の基本　CSSはどこにあるの？

なおulとolは扱いがほとんど同じなので適宜どちらかを使ってHTMLで説明をしていきます。

list-style-typeを変更することでマーカー表示の変更

list-style-typeの値を変更することによりリストのマークをデフォルトの黒丸や数字のデザインを変更することができます。

番号や目印を消す

もしリストに番号や目印を入れないようにするにはul/olをセレクタにして「list-style-type:none」を指定します。
先程のHTMLの記述に対して
CSSで以下のように記述をします。

ol{
	list-style-type: none;
}

すると以下のようにブラウザ表示されます。
ulリストで使えるlist-style-type:

なおCSSでlist-style-typeを指定するとulでもolでもそれにかかわらず指定された値になります。

つまりulで指定してあっても番号を指定する値を取れば番号が付きます。
目印の場合は

デフォルトでは黒丸ですが。

circleを値に取ると白丸になります。

ul{
  list-style-type: circle;
}

squareを値に取ると黒四角になります。

ol{
	list-style-type:square;
}

それ以外値はすべて番号の数字に関するもので、１２個あります。

list-style-type: decimal;}

ol {list-style-type: decimal-leading-zero;}

ol {list-style-type: lower-roman;}

ol {list-style-type: upper-roman;}

ol {list-style-type: cjk-ideographic;}

ol {list-style-type: lower-latin;}

ol {list-style-type: upper-latin;}

ol {list-style-type: hiragana;}

ol {list-style-type: katakana;}

ol {list-style-type: hiragana-iroha;}

ol {list-style-type: katakana-iroha;}

ol {list-style-type: lower-greek;}

数値以外に

cjk-ideographic（漢字）

lower-latin（小文字）

hiragana（ひらがな）

など様々ですので必要に応じて使っていきます。

マークに画像を使う

リスト目印を背景画像で表示することもできます。背景をいじるプロパティはbackground:です。
背景画像の形式（拡張子）は「png、jpg、svg、gif」などほぼすべてのものが使えます。
ベクター画像やイラスト系のアイコンであればどんなサイズでもくっきりと高画質で表示することができるsvgが一押し。
svgの扱いは他のは画像形式と同じです。

CSSの記述を以下のようにしました。

li{
	list-style-type: none;
	background: url(オレンジ1.svg) no-repeat left center;
	padding-left: 30px;
}

まずlist-style-type: none;を使ってリストの前にある目印や数字を消します。
その上で背景画像を指定します。
同じファオルダ内に入っていればその画像の名前を指定するだけでよかったんでしたね。

なのでHTMLやCSSが入っているフォルダに必要な画像を置きます。

今回は「オレンジ１.svg」を使います。

background: url(オレンジ1.svg) no-repeat left center;

背景画像の指定はurl(画像が置いてある場所)で行います。
「background-repeat:no-repeat;」はそのままだと画像が縦に繰り返し表示されてしまうので、no-repeatを指定して一枚だけ表示させるようにします。

その後に続くleft centerは「background-position」で。
no-repeatと一緒に使われて、背景画像の位置を指定します。
今回の場合、左中央に画像を置くように指定してあります。

ただそのままですと背景画像とテキストが重なり合ってしまいます。

なので余白を設けて画像とテキストが重ならないようにします。

padding-left: 30px;

すると背景画像の位置は変わらず、liタグで指定された部分だけが左によ寄りますから。
以下のようにブラウザ表示されます。

CSSを使った装飾の基本

ボックス周りを囲う

枠で囲うには
ul, ol {border :~}

という形でul,olをセレクタとし。
birderというプロパティを使います。

borderプロパティは、ボーダー（枠、縁）のスタイル・太さ・色をまとめて指定することができます。
スタイル・太さ・色の指定はその順番は任意でスペースで区切って記述します。

つまり
border :スタイル（囲むのが実線か破線か点線かなど）半角スペース太さ半角スペース色;(セミコロン)

となります。
先程来の記述を元にCSSに

HTML

<ol> 　　　　
 <li>リスト1</li> 
<li>リスト2</li>
<li>リliスト3</li> 
<li>リスト4</li>
 <li>リスト5</li> 
</ol>

二重線、太さ10px、色は赤を指定してみます。

それと全体に余白を付けて枠にリストが偏らないようにしました。

paddingの使い方については以下の記事にまとめてあります。

CSS marginとpadding 余白の指定方法　基礎

CSS

li{
 list-style-type: none;
  background: url(オレンジ1.svg) 
  no-repeat left center; 
  padding-left: 30px; 
}
ol{
	border:red 10px double;
	padding:10px;
}

ブラウザ表示

文字の色を変える

リストの文字の色を変えるにはcolorプロパティをliタグに対して指定します 。

ul li, ol li　{

color :値（色や色コード）

}

liだけセレクタにしても反映されます。

と記述します。
上記のCSSにさらに文字色の指定を行います。
茶色brownにしてみます。

li{

color:brown

}

を追加します。

CSS

li{
 list-style-type: none;
  background: url(オレンジ1.svg) 
  no-repeat left center; 
  padding-left: 30px; 
  color: brown;
}
ol{
	border:red 10px double;
	padding:10px;
}

ブラウザ表示

背景色を変える

ul, ol {

background :値（色名または色コード）

}

と記述するだけです。
さきほどのCSSに水色skyblueを背景色に指定します。

ただしbackgroundプロパティを別々に記述したら背景画像でマークしていたオレンジの画像は消えました。

 background: url(オレンジ1.svg) ;
  background: skyblue;

これを一つにまとめてみたら今度は画像を一つしか表示できないようにと指定してあった

no-repeat left center;

が効かなくなって以下のようなブラウザ表示になりました。

全体のCSSは以下。

li{
 list-style-type: none;
 background: url(オレンジ1.svg) skyblue;
  

  no-repeat left center; 
  padding-left: 30px; 
  
}
ol{
	border:red 10px double;
	padding:10px;
}

リストを横並び

ナビゲーションのようにリストを横並びさせることもよく行われます。

最初のHTMLの記述をもとに

<ol> 　
　 <li>リスト1</li>
　 <li>リスト2</li> 
　 <li>リliスト3</li>
 　<li>リスト4</li>
 　<li>リスト5</li>
 </ol>

CSSで横並びになるように記述をしてみたいと思います。

といっても簡単で display: inline-block;

を追加するだけです

li{
  display: inline-block;
}

すると以下のようにブラウザ表示されます。

これに背景色をつけ、幅が均等になるようにwidth:205;
とすると以下のようになって
隙間ができます。
隙間ができないようにするにはどうしたら良いかというと。
ulに以下のように記述し、親要素の影響を受けないようにします。

font-size: 0;

その上で改ためて小要素にfont-sizeを指定します。

ol{

font-size: 0;
}
li{
  display: inline-block;
  background-color: skyblue;
  font-size: 16px;
  width:205;
}

すると隙間がなくなります。

わかりやすく色分けをしてみます。
まずそれぞれのリストにclassで目印を付けます。

HTML

	<ol> 　
 	　 <li class="red">リスト1</li> 　 
 	   <li class="blue">リスト2</li> 　
 	   <li class="yellow">リスト3</li> 
 	 　<li class="skyblue">リスト4</li> 
 	 　<li class="brown">リスト5</li> 
 	</ol>

CSSで目印ごとに背景色を決めていきます。

ol{

font-size: 0;
}
li{
  display: inline-block;
 
  font-size: 16px;
  width:205;
}
.red{
   background-color: red;
}
.blue{
   background-color: blue;
}
.yellow{
   background-color: yellow;
   ]

}
.skyblue{
   background-color: skyblue;
}
.brown{
  background-color : brown;

  }

するとよく見かけるナビゲーションのようになりました。

シンプルなリスト装飾

今までの知識を土台にして練習を兼ねてさまざまなリストデザインを実際に制作していきます。
その後アイコンファンとを使ったリスト装飾も説明していきます。

枠付きのリストデザイン

点線で囲み背景を付けて、または文字色を変えて。
適宜余白を付けたりすればそれなりに見栄えがするリストを作ることができます。
まず枠のスタイルですが。

borderプロパティの値には

solid:1本線で表示
double:2本線で表示

dashed:破線で表示
dotted:点線で表示
groove:立体的に窪んだ線で表示
ridge:立体的に隆起した線で表示
inset:上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示
outset:上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示

後は線が出ないようにするhiddn,none(初期値）もありますがborderを設定しなければよいだけです。

実際に点線の枠で囲んであるリストを作ってみます。

HTMLは先程と同じ。
リスト１～５までシンプルな形にします。

例1

そしてCSSの方ですが。
まず親のulタグに対して。
外枠は点線で太さ３px、色コード#ADD8E6とします。
余白は実際のブラウザ表示を見ながら適宜決めていきます。
数値を４つとると上下左右の順番で指定されます。
枠の中の背景に色を付けます。

3つの指定をおこないました。全体として以下のような記述になります。

ul{
	
	border: dotted 3px #ADD8E6;
	padding:0em 3em 0.5em 2em;
	background: #E0FFFF;
}

次に個別のリストに変更を加えていきます。

まずデフォルトの●を消します。

マークを指定するlost-style-typeプロパティにnone指定をします。
list-style-type: none!important;

その上でcolorプロパティで文字の色を変え。

color:

font-weightプロパティで文字の太さを決めます。
font-weight: 700;

今回は700にしましたが。
標準の太さは400で、それより数値が小さければ細く、大きければ太くなります。

700がいわゆる太字ですので太字を指定するboldで置き換えても同じ太さになります。

次にリストの左と下に線を引きます。
枠の一部だけの線を引きたいときには
borderプロパティではだめで。
上下左右を指定するプロパティを使わなくてはなりません。
左は

border-left:スタイル　色　太さ

で指定をします。
マークの代りにするので少し太くしておきます。

下の線は

border-bottom:スタイル　色　太さ

で指定します。今回は

ただ下の線を引く場合、隙間がないと線は表示されませんのでmarginプロパティを使って外側に余白を作ります。

margin:値

値を指定して外側に余白を作ります。

またリストの幅を指定することができます。

line-heightプロパティで高さというか行の幅を決めることができます。
line-height:値

ということでCSSは以下。

ul li{
	line-height: 1.5;
	color:  	#5F9EA0;
	border-left: solid 4px #6495ED;
	border-bottom: dotted 2px #6495ED;

	margin-bottom: 5px;
	list-style-type: none!important;
	font-weight: 700;

}

ブラウザ表示は以下。

例2

次に上記リストを元に変更を加えてみます。少し可愛い感じにしてみます。

まずは親要素であるuタグjに対するCSS 。
枠のスタイルを破線dashedにしますと刺繍の縫い目のように見えるということでよく使われます。
そして枠四隅に丸みを付けます。
border-radiusプロパティは、ボックスの４つのコーナーの角丸半径の値でをまとめて指定してくれますが。
もしそれぞれの角の丸みを変えたい場合には以下の例のように
水平方向/垂直方向で分け。
それぞれ左上・右上・右下・左下の順で指定します。

border-radius: 50px 25px 50px 50px / 50px 100px 50px 25px;

ただし今回は同じような丸みを付けますので値を一つだけ書いておきます。
これで上下左右全く同じ丸みになります。

更に枠の外に背景が行くように影をつけてみます。

影をつけるのは
box-shadowプロパティですが。

値は4つあり。影の長さや色を指定していくんですが。
順番によって影が伸びていく方向が違っています。

１番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
２番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
３番目の長さの値は、ぼかし距離です。負の値を指定することはできません。値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
４番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
色の値を指定すると、影がその色になります。
insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。（CSS3リファレンス）

今回は枠から均等に線法にに伸びていくようにしたいので。
全方位に影が伸びていく4番目のみに数値を入れ、ほかは0としてみます。
色は背景と同じにします。

また枠の色を破線に変更し、色をオレンジにします。

小要素のliに対するCSSは
とりあえずbポーダーラインを破線にし。
色をオレンジに変えて統一感を出します。

全体のCSSは以下のようになります。

ul{
	
	border: dashed 3px orange;
	padding:0em 3em 0.5em 2em;
	background: #E0FFFF;
	
	box-shadow:0px 0px 0px 8px #E0FFFF ;
	border-radius:12px;

}
ul li{
	line-height: 1.5;
	color:  	#5F9EA0;
	border-left: solid 4px #6495ED;
	border-bottom: dashed 2px orange;

	margin-bottom: 5px;
	list-style-type: none!important;
	font-weight: 700;

}

ブラウザ表示は以下。

例3

今度は付箋のような、よくあるデザインを作ってみます。
先ほどまでは親要素の記述が多かったんですが。
今回はそれを削除してリストそのものを目立たせるようにします。

先程の記述から以下を変更します。
ulのCSSを消す。
liのCSSに背景をつける。

background: #F5DEB3;

それだけです。
全体のCSSは以下のようになります。

}
ul li{
	line-height: 1.5;
	color:#5F9EA0 ;
	border-left: solid 4px #FF7F50;
	border-bottom: solid 2px orange;
	background: #F5DEB3;

	margin-bottom: 5px;
	list-style-type: none!important;
	font-weight: 700;

}

ブラウザ表示は以下。

左端を丸くするには先程やった

border-radius

を使います。

値は記述する順番でそれぞれ左上・右上・右下・左下の順で指定します。
つまり2番めと3番目だけ半径の値を入れればいいということです。

それで以下を追加しました。

border-radius: 0 30px 30px 0;

ブラウザ表示は以下。

例4

今度はborder-radiusを使ってタグ風のデザインにしてみます。

ここでは疑似要素を使いますので。
わからない方は以下の記事をご覧ください。

CSS 擬似要素beforeとafter 使い方基本

横並びさせるためにdisplayプロパティも使います。
わからない方は以下の記事をご覧ください。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

例3のCSSの記述を以下のように変更します。

litagunoCSS部分の変更点はborder-radius

の部分を

border-radius: 0 30px 30px 0;

として右上と右下のみ丸みを付けました。
そレで左側にのみ丸みを作ります。

それだけです。
疑似要素に関してはまず中の丸とデザインをテキストの横に並べるために

display:inline-block;を指定し。
その丸我慢中に来るように

vertical-align: middle;

としました。

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定します。

後は挿入する丸のデザインですが。
中身はないのでコンテンツを空にします。

content:”;

それと円を形作るために

border-radius: 50%;

としすべての四隅を50％つまり半円に指定することで円を形作ります。
50％は90度なので4つで360度になるというわけです。
その円の大きさは直径で1em つまり文字の大きさと同じにします。
それと○とテキストが重ならないようにするため外側に右側に余白を設けます。

margin-right: 8px;

後は背景色を指定しました。

全体のCSSは以下。

ul li{
	line-height: 1.5;
	color:#5F9EA0 ;	

	background: #F5DEB3;

	margin-bottom: 5px;
	list-style-type: none!important;
	font-weight: 700;
	border-radius: 30px 0 0 30px;
}

ul li:before{ 
  display:inline-block; 
  
  vertical-align: middle;
  
  content:'';
  width:1em;
  height: 1em;
  background: #E0FFFF;
 
  border-radius: 50%;
  margin-right: 8px;
}

ブラウザ表示は以下。

アイコンフォントを使ってリストをさらにおしゃれに

アイコンは今回はFont Auesameを使います。
詳しい使い方は以下。

CSS　WEBアイコンフォントの使い方 Font Awesomeの活用

アイコンをリストに使う場合。
最初からやるときには以下の手順で行います。

①まずデフォルトの黒ポチを消します
消し方はol,ulに対してCSSで

list-style-type: none!important

を記述するんでした。

②次にolやliの疑似要素を作リます。
olまたはli:before

で疑似要素beforeの中にアイコンのコードを記述します。
③その上でアイコンの位置を positionで調節をしていくため。
まずliにはposition:relativeを記述し
li:beforeにはposition:absolute

を記述し。
top,right,lefut,bottomなどで調整をします。
またmarginやpaddingなど余白プロパティを使ったりもします。

④アイコンを設定するためにまずは
font-familyを指定しておかなくてはなりません。
Font Awesome５の中のブランド化されていないFreeなアイコンを使うという場合は

font-family: “Font Awesome 5 Free“;

ブランド化されているアイコンを使う場合には

font-family: “Font Awesome 5 Brands“;

と記述をします。

そして

content: ”;のアポストロフィーで囲んだ部分にまずバックスラッシュアイコンのユニコードを記述します。

content: ‘\f170’;

つまり先程の例４タグ風のデザインとほぼ同じようなやり方をしていきます。
なので先程のタグ風のデザインを変更するという形で実際にデザインをしていきます。
タグ風のデザインでは

すでに黒丸は削除されており。
疑似要素も準備してあります。
ulの変更点としては
position:relativeを付け加えることだけです。

疑似要素は大幅に変えていきます。
アイコンは以下を選んでみました。

regular styleなので。ブランド系ではありません。
なので”Font Awesome 5のアイコンを使いますがこれはブランド系ではありません、という意味で
font-family: “Font Awesome 5 Free”
と記述をします。

そしてアイコンの指定はcontent””（クオーテーション‐マーク）内にバックスラッシュ\に続けてユニコードを記述します。

なおバックスラッシュ
content: “f058”;

それと

position: absolute;

を加えます。

普通に考えれば以下のようなCSS記述で良いんですが。

ul li{
	position:relative;
	line-height: 1.5;
	color:#5F9EA0 ;	

	background: #F5DEB3;


	margin-bottom: 5px;
	list-style-type: none!important;
	font-weight: 700;
	border-radius: 30px 0 0 30px;
}

ul li:before{
   
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  content: "\f058";
  position: absolute;
  

  color: #EE82EE;
  
}

これで大丈夫かと思ったら。
ブラウザ表示をしてみると以下のようになりました。
アイコンとテキスト文字が重なってしまっています。

この場合、テキストとアイコンを話す方法で最も簡単なのはHTMLの方に という半角スペースを記述することです。
しかし「 」のnbspは「ノンブレークスペース（non-break-space）」（改行をしないスペース）の略語で、
本来「挿入した箇所の前後の改行を禁止する」ために使います。

なのでよく見かける は確かに半角スペースを空けてはくれるのですが。
サイズの大きな空白をつくるために複数の を使うのは非推奨ナンだそうです。

実際にアイコンと文字が重ならないようにするには   

と3つ並べなくてはならないので別の特殊文字を使うことにします。

本来のスペースを空ける特殊文字は他にあって。

&ensp; 　半角スペースより少し広い空白
&emsp; 　全角スペースとほぼ同じ大きさの空白
 　 の空白より小さい空白

今回は２番目のリストに対して&emsp; を使ってみました。

<ul> 　　　　
 <li>リスト1</li> 
<li>&emsp;リスト2</li>
<li>リスト3</li> 
<li>リスト4</li>
 <li>リスト5</li> 
</ul>

すると以下のようにブラウザ表示されます。

確かに２番めだけがアイコンと文字が重ならなくなりました。
CSSを使う正統派の方法もあるんですが。
いろいろやってみましたがうまくいかないので今回はHTMのliタグの中に全て&emsp; を入れてみました。

ブラウザ表示。

疑似要素のときにアイコンを使ったリストを作りましたが。
その時はこのような問題は起きなかったです。
背景を親要素で管理していたからだと思うんですが。

一応その時のHTMLとCSSの記述を再録しておきます。

HTML

<h1>日本で飼われているインコって？</h1>
 <ul> <li>セキセイインコL</li> 
<li>ボタンインコ</li>
 <li>オカメインコ</li>
 <li>コザクラインコ</li> 
</ul>

CSS

ul {
 border: dotted 5px red;
 background: silver;
 padding: 2em; 
}
 ul li { 
line-height: 1.5;
 padding: 0.5em 0 0.5em 2em; 
border-bottom: groove 2px red;
 list-style-type: none!important; 
} 
ul li:before { 
font-family: "Font Awesome 5 Free";
 content: '\f520';
 position: absolute; left: 1em;
 color: yellow;
 background: red; 
}
 ul li:last-of-type {
 border-bottom: none; 
}

桑いいことは以下の記事をご覧いただくとして。