[CSS]必須のマークをCSSでつける（線を引いてみる）

入力フォームで必須の場合に
CSSで指定して"*"マークを後ろにつけるのはちらほら見かけるが、
今回は以下の様に線の色を変えるバージョンをCSSで作ってみる。

HTMLはこんな感じ。[Requied]を指定します。
-----------------------------------------------------------
<td class="Requied" style="background-color:Gray;">部数</td>
------------------------------------------------------------

[Requied]は以下の様に指定すればOK。

-----------------------------------------------------------

td.Requied::before {
    content: "";
    position: absolute;
    height: 36px;
    box-shadow: 0px 0px 0px 1px red;
    -webkit-box-shadow: 0px 0px 0px 1px red;
    -moz-box-shadow: 0px 0px 0px 1px red;
    -o-box-shadow: 0px 0px 0px 1px red;
    margin-left: -5px;
    margin-top: -6px;
    margin-bottom: -8px;
    margin-right: 6px;

}

------------------------------------------------------------

[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>