★や◯などリストマークを簡単表示させる

リストマークというと、下記のように画像を表示させたりする方法もありますが、

• こんな感じに
• 表示されますね

（上のマークは角度調節のため、画像です）
 

時間のない時とか、CSSのリストマーカーの種類にはないものを表示させるのにいいな〜と思ったので、忘れないように例によって覚え書き。
画像だと調節に時間かかりますもんね。
 
 
こちらは表示例。

「しかく」で変換すると出るやつ。同じ四角でもこちらの方が若干大きい…？
もちろん三角や星など、変換がきくものならOKかと…（媒体によって表示がされないものもあるので、そこは注意！）
リストマーク（こちらでも別ページにて表示されます）

書き方は簡単。
CSS

ul {list-style: none;}	

.list ul li {
	margin: 10px;
	margin-left: 30px;}

.list li:before {
		content: "◼︎";
		color: red;
		margin-right: 5px;}

最初に「list-style: none;」で、リストスタイルを無効にする。
「li:before」で、リスト前。
「content」で好みのマークを入れればOK。
marginなどの位置はお好みで。
 
 

HTML

<div class="list">
	<ul>
		<li>ここは「Masa-P」というサイトです</li>
			
	</ul>
<div>

諸事情でコーディングは大分ご無沙汰してました。
忘れないように、便利な技は覚え書きしておいた方がいいですねー。