CSSのtext-decoration-colorでテキストの装飾線の色を指定する方法をわかりやすく解説

.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;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-red">
    これは赤い下線が付いたテキストです。
  </div>
</div>

.css-sample-text-red {
  text-decoration-color: red;
  text-decoration: underline;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-green">
    これは緑の下線が付いたテキストです。
  </div>
</div>

.css-sample-text-green {
  text-decoration-color: green;
  text-decoration: underline;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-blue">
    これは青い下線が付いたテキストです。
  </div>
</div>

.css-sample-text-blue {
  text-decoration-color: blue;
  text-decoration: underline;
}

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-custom">
    これは半透明の赤い下線が付いたテキストです。
  </div>
</div>

.css-sample-text-custom {
  text-decoration-color: rgba(255, 0, 0, 0.5);
  text-decoration: underline;
}