Come rendere questo menu di hamburger CSS interamente cliccabile?

Sto lavorando a un’icona di menu di hamburger CSS puro, finora funziona benissimo, tranne che gli spazi tra le righe non sono selezionabili. Come posso modificare questo codice in modo che l’intero pulsante sia selezionabile anziché solo le righe?

 .menu { width:30px; height:5px; background-color:#000; position:relative; display:inline-block; } .menu:after, .menu:before { content: ''; width: 100%; height:5px; background-color:#000; position:absolute; } .menu:after { top:10px; left:0; } .menu:before { top:20px; left:0; } 

Ecco un JSFiddle .

Grazie!

Fallo e basta

DEMO – 1 (bordo superiore o inferiore)

 .menu { width:30px; height:20px; position:relative; display:inline-block; border-top:4px solid black; } .menu:after, .menu:before { content: ''; width: 100%; height:4px; background-color:#000; position:absolute; } .menu:after { bottom:0px; left:0; } .menu:before { top:6px; left:0; }