html5 data 属性を使った アイコンの表示

&what;

HTML

<a href="#" data-icon="&#128439;" class="link-before-icon">lorem........</a>

<a href="#" data-icon="&#9742;" class="link-before-icon">lorem........</a>

<a href="#" data-icon="&#128231;" class="link-before-icon">lorem........</a>

<a href="#" data-icon="&#128506;" class="link-before-icon">lorem........</a>

<a href="#" data-icon="&#128510;" class="link-before-icon">lorem........</a>

CSS

.link-before-icon:before{
 content: "\00a0" attr(data-icon) "\00a0";
 display:inline-block;
 color:#3498db;
 font-size:1.4em 
}

"\00a0" はスペース

関連

モバイル端末での リンクあれこれ


新着記事

コメントは受け付けていません。