CSS - text-emphasis-style

トップ > CSSリファレンス > text-emphasis-style

概要

属性名 text-emphasis-style
none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
初期値none
適用可能要素テキスト
継承する
サポートhttps://caniuse.com/?search=text-emphasis-style

説明

テキストの上部に注意すべき箇所であることを示す圏点(けんてん)を表示します。text-emphasis で他のプロパティとまとめて指定することができます。

説明
none圏点を表示しません。
filled圏点を塗りつぶします。
open圏点を塗りつぶしません。
dot圏点をドットで表示します。
circle圏点を円で表示します。
double-circle圏点を二重円で表示します。
triangle圏点を三角形で表示します。
sesame圏点を胡麻(ゴマ)で表示します。
<string>圏点を文字で表示します。

使用例

CSS
.te { font-size: 20pt; }
.none { text-emphasis-style: none; }
.filled { text-emphasis-style: filled; }
.open { text-emphasis-style: open; }
.string { text-emphasis-style: 'x'; }
.filled-dot { text-emphasis-style: filled dot; }
.filled-circle { text-emphasis-style: filled circle; }
.filled-double-circle { text-emphasis-style: filled double-circle; }
.filled-triangle { text-emphasis-style: filled triangle; }
.filled-sesame { text-emphasis-style: filled sesame; }
.open-dot { text-emphasis-style: open dot; }
.open-circle { text-emphasis-style: open circle; }
.open-double-circle { text-emphasis-style: open double-circle; }
.open-triangle { text-emphasis-style: open triangle; }
.open-sesame { text-emphasis-style: open sesame; }
HTML
<div>
  <span class="te none">いろは</span>
  <span class="te filled">いろは</span>
  <span class="te open">いろは</span>
  <span class="te string">いろは</span>
</div>
<div>
  <span class="te filled-dot">いろは</span>
  <span class="te filled-circle">いろは</span>
  <span class="te filled-double-circle">いろは</span>
  <span class="te filled-triangle">いろは</span>
  <span class="te filled-sesame">いろは</span>
</div>
<div>
  <span class="te open-dot">いろは</span>
  <span class="te open-circle">いろは</span>
  <span class="te open-double-circle">いろは</span>
  <span class="te open-triangle">いろは</span>
  <span class="te open-sesame">いろは</span>
</div>
表示
いろは いろは いろは いろは
いろは いろは いろは いろは いろは
いろは いろは いろは いろは いろは

関連項目

text-emphasis

リンク


Copyright (C) 2022 杜甫々
初版:2022年7月31日、最終更新:2022年7月31日
http://www.tohoho-web.com/css/prop/text-emphasis-style.htm