文字の強調『傍点』をCSSで表現するには

公開日: : CSS

CSS

文字の上に点々をつけて、強調させる傍点をCSSで表現する方法のメモ。

注意点はWebkit系のブラウザ(Chrome・Safari・Opera)でしか
表示されないこと(2014.12.16現在)。

表示させるためのCSSは以下です。

tenten {
   -webkit-text-emphasis: filled dot #000000;
   text-emphasis: filled dot #000000;
}


上記はドットで強調させてますが、
・circle(円)
・double-circle(二重円)
・dot(点)
・triangle(三角形)
・sesami(ゴマ)

のどれかで指定可能。

filled(塗りつぶし)の部分も、
open(塗りつぶさない)が指定できます。

ブラウザは指定されますが、すぐ使えて便利

以下のサイトを参考にさせて頂きました。


ありがとうございました。

ad

関連記事

CSS

CSSだけで矢印をつくる方法

参考サイトのままです。 メモなので、簡単に。 情報元:スマートフォン

記事を読む

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

CSS

蛍光ペンで線を引いたようなラインをCSSで。

CSSでちょっとだけテキストにオシャレな小技を。 CSSだけで少し手書き感を出した

記事を読む

CSS

CSSでナンバリングする方法(CSSでナンバーを付ける)

ランキングにCSSでランキングの数字を付けたくて、方法を探してみました。 このサイトの

記事を読む

CSS

背景だけを透過させるCSSの書き方

タイトルの通り、背景だけを透過させるCSSの書き方。 簡単にいうと、 背景の

記事を読む

CSS

Google Map(グーグルマップ)をレスポンシブ対応に。

Google Mapを埋め込むときにレスポンシブ対応させる方法。 そのままコピペすれば

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑