リンクをクリックできない！

Question

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

<div class="hosoku"> <a href="https://〇〇〇/□□□">リンク</a>を読んでください。 </div>

---

このように記述しているのですが、見た目ではちゃんとリンクの装飾がなされているのに、なぜかクリックはできません。カーソルが指の形にならないのです。

<div>タグの中にリンクがあるのが問題なのかなとも考えましたが、他の<div>タグ（別クラス）の中のリンクはクリックできます。

どうなっているのでしょうか？？

ちなみに、.hosoku::beforeのCSSを削除すればリンクは正常にクリックできるようになります。ただし、その場合は白い点線が出てこなくなります。

Answer 1

.hosoku a{position:relative;} 

を指定されてはどうでしょうか？

Comments

[退会済みユーザー]

できました！ありがとうございました！

[yambejp]

あ、かぶった

Answer 2

<a>にposition: relative;を指定してください。
.hosoku::beforeがposition: absolute;なので<a>が覆われてしまってる感じです

.hosoku a {
  position: relative;
}

.hosoku::beforeにpointer-events : none;を指定しても解決できますが、IE11未満では動かないようなので前者が良いでしょう

Comments

[退会済みユーザー]

できました！ありがとうございました！

[mrkm144]

taget入力でできた??