質問: **CSS** .hosoku{ position: relative; display:inline-block; background: -webkit-linear-gradient(#F8c884 , #F4A460); background: linear-gradient(#F8c884 , #F4A460); border: 1px solid #F8c884; border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em; color: #444; font-size:0.8em; padding: 0.5em 1em; margin: 2em 0; text-decoration: none; } .hosoku::before{ position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; content: ''; border: 2px dashed #fff; border-radius: .4em 2em .5em 3em/3em .5em 2em .5em; } --- **HTML** リンクを読んでください。 --- このように記述しているのですが、見た目ではちゃんとリンクの装飾がなされているのに、なぜかクリックはできません。カーソルが指の形にならないのです。 タグの中にリンクがあるのが問題なのかなとも考えましたが、他のタグ(別クラス)の中のリンクはクリックできます。 どうなっているのでしょうか?? ちなみに、.hosoku::beforeのCSSを削除すればリンクは正常にクリックできるようになります。ただし、その場合は白い点線が出てこなくなります。
回答: に`position: relative;`を指定してください。 `.hosoku::before`が`position: absolute;`なのでが覆われてしまってる感じです ``` .hosoku a { position: relative; } ``` `.hosoku::before`に`pointer-events : none;`を指定しても解決できますが、IE11未満では動かないようなので前者が良いでしょう