[CSS]表題や注意書きの前に丸や四角を表示する。

よく忘れるのでメモ。
--------------
●ここに注意！
--------------
↑などを表記するとき、画像をはりつけるのは面倒なのでＣＳＳで行う。


出来上がりイメージはこちら
↓↓↓↓↓↓

CSS/HTMLは以下。

.header1-1{
    height:40px;  
}
.header1-1:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 5px solid transparent;
  background: #337AB7;
  border-radius: 5px;
}
.header1-2{
    height:40px;  
}
.header1-2:before {
  content: "";
  margin-right:3px;
  display: inline-block;
  border: 8px solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: red;
}
.header1-3{
    height:40px;  
}
.header1-3:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid;
  border-top-color: transparent;
  border-right-color: #66CC22;
  border-bottom-color: transparent;
  border-left-color: #CC2266;
  background: #337AB7;
  border-radius: 7px;
}
.header1-4{
    height:40px;  
}
.header1-4:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid transparent;
  background: #337AB7;
}
.header1-5{
    height:40px;  
}
.header1-5:before {
  content: "";
  margin-right:5px;
  display: inline-block;
  border: 7px solid transparent;
  background: #337AB7;
  border-radius: 3px;
}
.header1-7{
  width:22px;
  color:blue;
  display: inline-block;
  border: 1px solid black;
  background: pink;
  border-radius: 10px;
}

<div class="header1-1">前に○をつけてみます。</div>

        <div class="header1-2">前に△をつけてみます。</div>

        <div class="header1-3">組み合わせるとおかしなものもできあがった。</div>

        <div class="header1-4">シンプルな□はこれ</div>

        <div class="header1-5">○の角度を変えると□っぽく</div>

        やりながら思ったけど①などもＣＳＳで実装できる&nbsp;&nbsp;→&nbsp;&nbsp;<div class="header1-7" >a</div>