下記リンクにサンプルを作りましたが、疑似要素とcssのcalcを組み合わせた場合に、中のリンクが機能しなくなるのですが、 解決法があればご教授頂ければ幸いです。 何卒宜しくお願い致します。 https://jsfiddle.net/1r6ufm0o/ ------------------------------------------------------ 【HTML】 <div class="bdr01"> <p><a href="#">リンク</a></p> </div> ------------------------------------------------------ 【CSS】 a { text-decoration: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .bdr01{ text-align: center; display: block; padding: 10px 20px; margin: 0; border: solid 3px #e0ab0a; position: relative; } .bdr01:after{ content: ""; border: solid 3px #32984e; position: absolute; top: 0; left: 0; width: calc(100%); height: calc(100%); }