text-emphasis-position …… テキスト傍点の位置を指定する







広告
text-emphasis-positionプロパティは、テキスト傍点の位置を指定する際に使用します。
over と underは、横書きの場合の傍点の表示位置を指定する値です。
right と leftは、縦書きの場合の傍点の表示位置を指定する値です。
初期値は、over rightです。
■値
- over
- 横書きの場合に傍点をテキストの上に表示する
- under
- 横書きの場合に傍点をテキストの下に表示する
- right
- 縦書きの場合に傍点をテキストの右に表示する
- left
- 縦書きの場合に傍点をテキストの左に表示する
■初期値・適用対象・値の継承
- 初期値
- over right
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
スタイルシート部分は外部ファイル(sample.css)に記述。
p.sample { text-emphasis: triangle red; text-emphasis-position: under left; }
HTMLソース
<p class="sample"> text-emphasis: triangle red;<br> text-emphasis-position: under left;<br> を指定。 </p>
↓↓↓
ブラウザ上の表示
text-emphasis: triangle red;
text-emphasis-position: under left;
を指定。
■ベンダープレフィックスを付けた場合の使用例
スタイルシート部分は外部ファイル(sample.css)に記述。
p.prefix_sample { -webkit-text-emphasis: triangle red; -moz-text-emphasis: triangle red; -ms-text-emphasis: triangle red; -webkit-text-emphasis-position: under left; -moz-text-emphasis-position: under left; -ms-text-emphasis-position: under left; }
HTMLソース
<p class="prefix_sample"> -webkit-text-emphasis: triangle red;<br> -moz-text-emphasis: triangle red;<br> -ms-text-emphasis: triangle red;<br> <br> -webkit-text-emphasis-position: under left;<br> -moz-text-emphasis-position: under left;<br> -ms-text-emphasis-position: under left;<br> を指定。 </p>
↓↓↓
ブラウザ上の表示
-webkit-text-emphasis: triangle red;
-moz-text-emphasis: triangle red;
-ms-text-emphasis: triangle red;
-webkit-text-emphasis-position: under left;
-moz-text-emphasis-position: under left;
-ms-text-emphasis-position: under left;
を指定。
広告