text-decoration-styleプロパティ

text-decoration-styleプロパティに指定できる値

text-decoration-styleプロパティには以下の値を指定することができます。

使用例

text-decoration-styleプロパティに上記の5種類の値を指定し、ブラウザでの表示を確認していきます。

CSS コード例

.sample1 {
  box-sizing: border-box;
  padding: 20px 0;
  width: 400px;
  border-bottom: 1px solid #ccc;
}
.sample1.first {
  border-top: 1px solid #ccc;
}
.sample1 h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 p {
  line-height: 1.8;
}
.text1 {
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: #186eb6;
}
.text2 {
  text-decoration-style: double;
  text-decoration-line: underline;
  text-decoration-color: #186eb6;
}
.text3 {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: #186eb6;
}
.text4 {
  text-decoration-style: dashed;
  text-decoration-line: underline;
  text-decoration-color: #186eb6;
}
.text5 {
  text-decoration-style: wavy;
  text-decoration-line: underline;
  text-decoration-color: #186eb6;
}

HTML コード例

<div class="sample1 first">
  <h2>text-decoration-style: solid;</h2>
  <p class="text1">テキストの上下中央に線を引くテスト。</p>
</div>
<div class="sample1">
  <h2>text-decoration-style: double;</h2>
  <p class="text2">テキストの上下中央に線を引くテスト。</p>
</div>
<div class="sample1">
  <h2>text-decoration-style: dotted;</h2>
  <p class="text3">テキストの上下中央に線を引くテスト。</p>
</div>
<div class="sample1">
  <h2>text-decoration-style: dashed;</h2>
  <p class="text4">テキストの上下中央に線を引くテスト。</p>
</div>
<div class="sample1">
  <h2>text-decoration-style: wavy;</h2>
  <p class="text5">テキストの上下中央に線を引くテスト。</p>
</div>

ブラウザで表示してみると以下のようになります。