Menu
I have a element which has two borders. I achieved that by adding a pseudo element:
.inner:before { width: 72px; height: 28px; content: ''; display: block; border: 3px solid rgb(255, 0, 0); position: absolute; } The element is wrapped with another div which has the property overflow: hidden.
As you can see here: http://jsfiddle.net/HKEn4/1/ the .inner-element is hidden but not the pseudo element (tested with safari, firefox and chrome on OSX).
How can I hide the pseudo element?
553
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
The ::before pseudo-element can be used to insert some content before the content of an element.
I added position: relative; in the .wrapper class and it works!
See fiddle: http://jsfiddle.net/HKEn4/2/
153
Either remove the position:absolute from the :before pseudo-element, or add position:relative to the container..
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
