text-emphasis-colorプロパティ

text-emphasis-colorプロパティに指定できる値

text-emphasisプロパティでテキストの強調したい部分に印を表示する場合、text-emphasis-colorプロパティで印の色を設定することができます。

色の指定方法については、カラーネーム、カラーコード、rgbaで指定します。
CSSの色の指定方法については、「CSSでの色の指定方法について」をご覧ください。

使用例

text-emphasis-styleプロパティで指定した印に対し、text-emphasis-colorプロパティで色を指定していきます。
2018年12月現在、ChromeとOperaでこのプロパティを使用するにはベンダープレフィックス「-webkit-」を付けて指定する必要があります。

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 em {
  text-emphasis-style: circle;
}
.text2 em {
  text-emphasis-style: circle;
  text-emphasis-color: red;
}
.text3 em {
  text-emphasis-style: circle;
  text-emphasis-color: #2484bf;
}
.text4 em {
  text-emphasis-style: "♥";
  text-emphasis-color: rgba( 204, 192, 4, 1.0);
}

HTML コード例

<div class="sample1 first">
  <h2>text-decoration-style: solid;</h2>
  <p class="text1">text-emphasisプロパティはテキストを<em>強調</em>することができます。</p>
</div>
<div class="sample1">
  <h2>text-emphasis-color: red;</h2>
  <p class="text2">text-emphasisプロパティはテキストを<em>強調</em>することができます。</p>
</div>
<div class="sample1">
  <h2>text-emphasis-color: #2484bf;</h2>
  <p class="text3">text-emphasisプロパティはテキストを<em>強調</em>することができます。</p>
</div>
<div class="sample1">
  <h2>text-emphasis-color: rgba( 204, 192, 4, 1.0);</h2>
  <p class="text4">text-emphasisプロパティはテキストを<em>強調</em>することができます。</p>
</div>

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