I have a DIV
with inner A
-tags. The DIV has a inset-shadow on it's top border, every inner A-tag has a right border.
It would look much better if the A-border would be behind the shadow, but per default, it's on top.
Please look at my jsFiddle. http://jsfiddle.net/X7475/
Any ideas welcome.
Solution:
I did it without an extra element by using the CSS:before pseudo-element like this:
.post-footer:before { -moz-box-sizing: border-box; box-shadow: 0 7px 7px -7px #000000 inset; content: " "; display: block; height: 7px; overflow: hidden; position: absolute; width: 100%; z-index: 1; }
Fiddle: http://jsfiddle.net/X7475/4/
Of course this is really pixel-shifting to it's finest, but I still think it's worth the visual effect.