テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。 いずれもカスタマイズといっても簡易的なものばかりでほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。 また、あまりdata属性を使ったことがないという人はこういう使い方もあるということで参考にしてみてください。 ここで紹介している内容はdata属性を利用した実装サンプルのひとつとして紹介しており、擬似要素で表示させているテキストはあくまで装飾目的で表示している想定になります。 SEOやスクリーンリーダー対応などに影響があると考えられる場合は、しっかりとマークアップしたもので実装してください。 補足テキストを表示 #1 見かけることが多いと思う、ナビゲーシ
![data属性を利用したナビゲーションの実装サンプル - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f5628d28a0127d9961a917d9c7c1843d118530c/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fdevelopment.png)