HTML5の独自データ属性を利用すると、CSSで属性に指定した値（name-value の value）を取得して表示することができます。
CSSは元々書式設定に利用できるので、併せて使用すると便利です。
base on "3.2.5.9 data-* 属性を使った独自非表示データの組み込み"
独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。
例えば以下のように、属性"data-sample"に指定した値に書式設定＆テキスト表示することができます。
目次
設定例
<style type='text/css'>
span[data-sample^="\*"]:after {
font-size: 80%;
vertical-align: top;
content:attr(data-sample);
}
</style>
<body>
<div><span data-sample="*Ⓐ">脚注 </span></div>
<div><span data-sample="*Ⓑ">脚注 </span></div>
<div><span data-sample="*Ⓒ">脚注 </span></div>
</body>
表示例
脚注 *Ⓐ
脚注 *Ⓑ
脚注 *Ⓒ