<ul>
<li>청소하기</li>
<li>빨래하기</li>
<li>공부하기</li>
</ul>
/* 가상요소를 사용한
다양한 list-style
*/
li{
list-style: none;
position: relative;
}
li::before{
content: '- ';
}
li:first-child::before{
content:''
display: block;
width: 0.3em;
height: 0.3em;
transform: rotate(45deg);
border: 2px solid royalblue;
border-width: 2px 2px 0 0;
position: absolute;
left: -1em;
top: 0.4em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.