text-decoration,text-decoration-line,text-decoration-style,text-decoration-color 「文字の装飾線」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-decoration-u{text-decoration : underline;}
.css-u{text-decoration-line : underline;}
.css-decoration-o-db{text-decoration : overline double;}
.css-o-db{
  text-decoration-line : overline;
  text-decoration-style : double;
}
.css-decoration-t-dt-r{text-decoration : line-through dotted red;}
.css-t-dt-r{
  text-decoration-line : line-through;
  text-decoration-style : dotted;
  text-decoration-color : red;
}
<!-- html -->
<div class="common">
  <div class="cssTitle">text-decorationにまとめて指定</div>
  <div>
  <b>◆underline指定</b><br><br>
  <span class="css-decoration-u">
  下線が引かれる。
  </span><br><br>
  <b>◆overline double指定</b><br><br>
  <span class="css-decoration-o-db">
  上に二重線が引かれる。
  </span><br><br>
  <b>◆line-through dotted red指定</b><br><br>
  <span class="css-decoration-t-dt-r">
  取り消し線が赤の点線で引かれる。
  </span>
  </div>
  <div class="cssTitle">text-decoration-line<br>text-decoration-style<br>text-decoration-color<br>それぞれ指定</div>
  <div>
  <b>◆text-decoration-line:underline指定</b><br><br>
  <span  class="css-u">
  下線が引かれる。
  </span><br><br>
  <b>◆text-decoration-line:overline指定<br>
  ◆text-decoration-style:double指定</b><br><br>
  <span class="css-o-db">
  上に二重線が引かれる。
  </span><br><br>
  <b>◆text-decoration-line:line-through指定<br>
  ◆text-decoration-style:dotted指定<br>
  ◆text-decoration-color:red指定</b><br><br>
  <span class="css-t-dt-r">
  取り消し線が赤の点線で引かれる。
  </span>
  </div>