見出し画像

思いもつかんかった!チェックマーク装飾。

cssでチェックマークの装飾。2辺にボーダー引いて45度くらい回転。listに装飾するならbeforで擬似要素にして入れてまう!

【html】

<ol>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ol>

【css】

ol {
list-style: none;/*初期スタイルを消す*/
padding: 0;/*隙間も消す*/
}
ol li {
padding: 0 0 0 1.5em;/*項目の左をインデントする*/
position: relative;
}
ol li:after {
content: "";/*テキストは使わない*/
width: 5px;/*チャックスクエアの高さ*/
height: 10px;/*チャックスクエアの幅*/
border: #999999 solid;/*線の色と種類*/
border-width: 0 0 3px 3px;/*線の幅(左ろ底の2辺)*/
transform: rotate(50deg);/*回転*/
/*以下位置調整*/
position: absolute;
top: 5px;
left: 7px;
}

世の中強者がいるものだ。
そしてちょっと検索すると解決策がリストアップすつという、便利な世の中になったもんだ。

よろしければ「スキ」をお願いしますm(_ _)m


この記事が気に入ったらサポートをしてみませんか?