CSSのテキスト装飾ネタ（使用の推奨はしません）

• CSSのテキスト装飾ネタ サンプルリンク

del要素を黒塗りにする

テキストを黒く塗りつぶして見えなくする実装です。ついでにテキスト選択も出来ないように。

CSSのコード

del{
 display: inline;
 background: #000;
 text-decoration:overline;
 color: #000;
 user-select: none;
}

なお、HTMLソース見たら内容がすぐわかるので意味はありません。またユーザの印象悪くなるのでネタとしてどうぞ。悪用厳禁です。

• サンプルをみる

abbr要素のtitle属性を可視化

abbr要素は略語や単語の頭文字を包括する要素です。また必須ではありませんが、本来の単語とtitle属性で指定します。パソコンであれば単語の上にマウスオーバーすればtitle属性に指定した内容がツールチップ時で表示されますが、スマホやタブレットなどのタッチデバイスでは見えません。そこでCSSで可視化します。

HTMLのコード

<p><abbr title="HyperText Markup Language">HTML</abbr>とは、<abbr title="World Wide Web Consortium">W3C</abbr>が策定するマークアップ言語です。</p>

CSSのコード

abbr{
 text-decoration: none;
}
abbr::after{
 content: "("attr(title)")";
 color: #999;
 font-size: 88%;
}

擬似要素で見た目上で生成させるため、テキスト選択をしたりできず、音声ブラウザや非視覚系ブラウザでも無視されますので注意が必要です。

• サンプルをみる

その他

Web1.0時代やガラケー（旧型モバイル）Webサイトでよく見かけたマーキーと点滅文字をCSSで再現しました。

• CSSのテキスト装飾ネタ サンプルリンク

他、おまけ（？）あり。Sorry, this site is Japanese only!

おしまい♥