Ez nem hiba, ez így kell működjön, a gomb felé tettél egy réteget, ezzel el takartad a gombot, ha position absolute segítségével több réteget egymásra pakolsz ott is a legfelső amire az egér eseményei hatnak, a többi csak akkor látszik ha a felette lévő részek átlátszók vagy áttetszők, illetve a kattintás sem fut hosszan az egészen, ha mindenképp ilyent akarsz csinálni, akkor old meg javascripttel és position absolute-segítségével, és a felső rétegre akkor tudsz tenni event kezelőt. A before-segítségével hozzá adott elem nem része a DOM strukturának nincs HTMLElementNode-ja se, így nem lehet rá event kezelőt sem tenni.
Ha két egymásba ágyazott elemet találsz, akkor megoldható úgy, hogy nem keretet teszel rá, hanem az egyik elemre teszel before és afterrel egy egy egy pixeles oszlpot a két szélére, és a másik elemre teszel before és after segítségével egy egy sort fent és lent, és ebből a négy részből áll össze a kereted, ebben az esetben a benne lévő részek elérhetőek maradnak az egér számára.
A döntés hogy melyikkel oldod meg az attól függ, hogy módosíthatod-e a html-t ha igen akkor rakj rá egy sima divet és adj neki classt, arra rakd a keretet, ha mindenképp hacker megoldás kell, akkor javascript a megoldás, ha meg csak gyakorolni akarsz akkor érdemes ezt a másodszor felvázolt rendszert is megpróbálni ez esetben a
div#contacts:before
div#contacts:after
div#contacts table:before
div#contacts table:after
lenne a nyerő, a div relativ poziciója fog hatni a táblázat before és after elemére is, így a méretek nem fognak problémát okozni (elméletileg :)) ).