<ul class="square">
<li>ショートケーキ</li>
<li>オペラ</li>
<li>フルーツタルト</li>
<li>シュヴァルツヴェルダー・キルシュトルテ</li>
</ul>
<hr>
<ul class="dia">
<li>ショートケーキ</li>
<li>オペラ</li>
<li>フルーツタルト</li>
<li>シュヴァルツヴェルダー・キルシュトルテ</li>
</ul>
/* style reset */
ul{
list-style:none;
margin: 0;
padding: 0;
}
/* square */
.square li{
position:relative;
padding-left: 20px;
margin-bottom: 10px;
}
.square li:before {
content: "";
width: 10px;
height: 10px;
background: tomato;
position: absolute;
top: 7px;
left: 0;
}
/* dia */
.dia li{
position:relative;
padding-left: 20px;
margin-bottom: 10px;
}
.dia li:before {
content: "";
width: 10px;
height: 10px;
background: tomato;
position: absolute;
top: 7px;
left: 0;
transform: rotate(45deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.