リンクタグ（aタグ）って、いろいろな疑似クラスを使えますよね。
| :link | 未訪問リンクのスタイルを指定。 |
| :visited | 訪問済リンクのスタイルを指定。 |
| :hover | マウスカーソルを載せているときのスタイルを指定。 ※スマホには hover の概念はないよ！ |
| :active | クリックされたときのスタイルを指定 |
よく使うのは :hover くらいでしょうか。
そして今回、hover 以外を使わなさ過ぎて引っかかったことがあったのでメモ。
:visitedでスタイル指定ができない
ことの発端は、
「訪問前と訪問後でcssを変えたいんですけどうまくいかないです」と言われたこと。
具体的には、「訪問前はtext-decoration:underline;、訪問後はtext-decoration: none;にしたいんだけどできない」というもの。
いやいやできるっしょ！って思って試したら
できない。
いや…いやいや…このご時世cssでできないことある…？（※あります）って思いながら試行錯誤して、
・文字色は切り替えられる
・いっそ最初からtext-decorationをnoneにしておいて、疑似要素つけて試そうとしてもうまくいかない
ことがわかりました。
文字色は切り替わるから、セレクタ間違いとかではないはずなんです。
css効かないときにはここを参考にしてね
CSSが効いてない！？そんなときにチェックしたいポイント
ていうかhoverでは下線の表示非表示は普通にできるんですよ。そういう世界線で生きてきた。
visitedだけ出来ないとかある？？って思ったら
あった。
:visitedに利用できるスタイルは限られていた
利用できる CSS プロパティは、 color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color です。
https://developer.mozilla.org/ja/docs/Web/CSS/:visited
まじなのですかー！
ということは、先の議題である
「訪問前はtext-decoration:underline;、訪問後はtext-decoration: none;にしたいんだけどできない」
を実装するには、
text-decorationではなくborderでそれっぽく実装したうえで、visited時には線色を透明にしないといけないのね…。ふむふむ…
は？？？？消えないけど？？
（比較としてhoverちゃんも併記してあるので、従順なhoverちゃんもご堪能ください）
結論
visitedに凝ったスタイルはつけないほうが良い。
文字色とか背景色は変えられるからその程度にとどめておきましょう…。
