無難なリスト

RESULT
HTML
CSS

- list
- list
- list

コピー

<ul class="msr_list01">
  <li><span></span>list</li>
  <li><span></span>list</li>
  <li><span></span>list</li>
</ul>

コピー

.msr_list01 li {
  font-size: 13px;
  padding-bottom: 5px;
}
.msr_list01 li:last-child {
  padding-bottom: 0;
}

/* アイコン（丸の箇所） */
.msr_list01 li span {
  background-color: #AAAAAA;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
*display:inline;
*zoom:1;
  height: 10px;
  margin: 0 10px 3px 0;
  position: relative;
  vertical-align: middle;
  width: 10px;
}

/* アイコン（三角の箇所） */
.msr_list01 li span:before {
  border-bottom: 3px solid transparent;
  border-left: 3px solid #FFF;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  content: "";
  display: block;
  left: 4px;
  position: absolute;
  top: 2px;
}