[css]リストの前にチェックマークを入れてみよう

今回は、リストの前にチェックマークを入れてみようと思います。以前記事で書かせていただいた三角形を入れる方法とほぼ同じと言えます。ただbeforeの要素に実現するものが違うといったものになります。リストの前を三角形にする方法はこちら

リストの前にチェックマークを入れるhtml

リストの前にチェックマークを入れるためのhtmlを用意したいと思います。三角形を入れる時と同じで、シンプルな構造のhtmlとなります。

<ul class="checkmark">
 <li>リストの前にチェックマークを入れてみよう</li>
 <li>リストの前にcssを使ってチェックマークを入れてみよう</li>
 <li>今回もborderが活躍します。</li>
</ul>

上記のようなhtmlを使用していきます。

リストの前にチェックマークをcssで入れてみよう

三角形を作った時と同様に最初からデフォルトでついている丸いちょぼマークを消していくところからスタートします。
今回は、そのサンプルの過程は省略したいと思います。
ではコードの考え方についてご紹介したいと思います。

チェックマークは簡単に考えますと長方形の右側と下側に線を引いて、４５度回転させてものと考えられます。

ではこの考えのもとcssを記述しますと次の通りになります。

<style>
 .checkmark{
   list-style:none;
 }
 .checkmark li{ 
   position:relative;
  }
 .checkmark li:before{
   position:absolute;
   content:"";
   width:5px;
   height:10px;
   border-right:2px solid red;
   border-bottom:2px solid red;
   display:inline-block;
   left:-1.5em;
   top:1em;
   transform:rotateZ(45deg);
  }
</style>
<ul class="checkmark">
 <li>リストの前にチェックマークを入れてみよう</li>
 <li>リストの前にcssを使ってチェックマークを入れてみよう</li>
 <li>今回もborderが活躍します。</li>
</ul>