CSSのtext-decoration-styleでテキストの装飾線のスタイルを設定する方法をわかりやすく解説

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
}

.css-sample-text {
  border: 1px solid #999;
  padding: 10px;
  font-size: 16px;
  text-decoration: underline;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-solid">
    これは実線の下線が引かれたテキストです。
  </div>
</div>

.css-sample-text-solid {
  text-decoration-style: solid;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-dashed">
    これは破線の下線が引かれたテキストです。
  </div>
</div>

.css-sample-text-dashed {
  text-decoration-style: dashed;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-dotted">
    これは点線の下線が引かれたテキストです。
  </div>
</div>

.css-sample-text-dotted {
  text-decoration-style: dotted;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-double">
    これは二重線の下線が引かれたテキストです。
  </div>
</div>

.css-sample-text-double {
  text-decoration-style: double;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-wavy">
    これは波線の下線が引かれたテキストです。
  </div>
</div>

.css-sample-text-wavy {
  text-decoration-style: wavy;
}