参考になるサイトはたくさんあります。その特集としてはたとえばこちら。

20141004の記事＝寝ログ

本サイトでは「.h11」とし、divでクラスを与えています。

 .heading5{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}

.heading5:before{
content:”;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
height:12px;
width:12px;
display:block;
position:absolute;
top:13px;
left:5px;
background-color:#00A8FF;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

本サイトでは「.h12」とし、divでクラスを与えています。

.heading8{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #51A2C1;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

.heading8:before{
content:”;
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}