css 도넛 모양 bullet 만들기

 

html

<h3>도넛모양 bullet</h3>

 

css

h3 {
    padding-left: 18px;
    font-weight: 600;
    position: relative;
}


h3::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    border: 2px solid #435df6;
    position: absolute;
    left: 0;
    top: 6px;
    border-radius: 100%;
    margin-left: 4px;
}

 

 

결과

 

css로 만드는 도넛 모양 불릿은 boder-radius를 이용해서 원을 만들고 border 값을 두껍게 주면 간단하게 만들 수 있습니다.