Spicing up text with text-emphasis in CSS
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
CSSにはテキストのスタイリングを行う多くの方法があります。色、サイズ、フォント、さらにはシャドウやアウトラインなどのエフェクトを加えることもできます。しかし最近、これまで聞いたことのなかった洗練されたCSSプロパティを学びました。かなりカッコいいですよ!
それは text-emphasis と呼ばれるプロパティで、テキストに強調マークを付けるための text-emphasis-* プロパティの組み合わせの省略形です。これらのマークを使って、ドット、円、二重円、またはテキストの上下に付加するなど、さまざまな方法でテキストを強調表示できます。
以下は、 text-emphasis を使ってテキストにドットを付ける例です。
.text-emphasis-dot { text-emphasis: dot; }
これによってテキストの上にドットが付くようになります。
text-emphasisプロパティを使って、テキストに二重円を付けることもできます:
.text-emphasis-double-circle { text-emphasis: double-circle; }
こんな感じになります。
文字を使ってテキストに強調を付けることもできます。例えば、以下のように$を使ってテキストの下にドル記号を付けられます:
.text-emphasis-dollar { text-emphasis: '$' lime; text-emphasis-position: under; }
text-emphasis-positionプロパティを使って、強調マークの位置を指定できます。over、under、right、leftを使って、強調マークの位置を上、下、右、左に指定できます。
こんな感じになります
テキストに強調を付けるためにemojiも使えるんですね。例えば、以下のように 🔥 を使ってテキストに火の絵文字を付けることができます
.text-emphasis-fire { text-emphasis: '🔥'; }
こんな感じになります
text-emphasisプロパティはテキストに強調を付ける面白い方法ですね。デザインを盛り上げるのに使えそうです。ほとんどの最新のブラウザでサポートされているので、今日からテキストを目立たせるために使い始められます!
