リンクに触れると文字が出る。
★文字１。文字２。
<head>〜</head>内に
リンクを貼るところに
少しややこしいタグです。
「文字１」は初めから表示されている文字で、
「文字２」はマウスで触れると表示される文字です。
「★」と「文字１」と「文字２」は１つのリンクで、リンク先ももちろん同じです。
「★」と「文字２」の文字色（リンク色）と背景色を同じにして、
何も触れていない状態では見えないように隠しておきます。
しかしそれでは「文字１」も背景色と同じになってしまうので、
「文字１」だけ、文字色（リンク色）を指定します。
リンクに触れたら文字色が変わる設定にすると、
白だった「★」と「文字２」の色が変わり、後から文字が現れる、という仕組みです。
「文字２」が二箇所あるのは、「文字１」の前後に文字を入れられるからです。
初めのタグで、上から４行目のtext-decoration:none; は下線消去指定のタグです。
リンクの下線を消したくない場合は、上からの３〜５行目までを
消してください。
このタグは初回のみ、有効です。
文字色の変化は「リンク」にのみ有効なので、一度訪問したリンクは
触れても文字色は背景色から変わりません。
でもとてもかわいいと思うので、頑張って使ってみてください。