you could use box-shadow instead pseudo-element : http://jsfiddle.net/Ku6BQ/24/
.main { width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; } .main:hover { box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff; } body { background-color:#888; } If you it it transparent and show behind a gradient or an image, you may still use box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main { width:80px; height:80px; border-radius:100%; box-shadow:inset 0 0 0 100px #007eff; text-align:center; line-height:80px; } .main:hover { border:4px transparent solid; margin:-4px; box-shadow: 0 0 0 2px #007eff, inset 0 0 0 100px #007eff;; } html { background :#888 url(http://lorempixel.com/200/200/nature) repeat; height:100%; }