Menu
I have an <a> element, after which I want to show a > sign, using the :after pseudo element.
The <a> element's content is dynamic, so its width changes, and sometimes the content event spans a few rows (since this <a> element is inside a <div> who's width is fixed).
I would like the >'s horizontal position to start at the end of the longest row. That is, when I give it that right:0; rule, it should be at the right most edge of the element (the vertical position doesn't matter right now):
That's the way it behaves in FF, but in Chrome and IE, the > appears at the end of the shortest row:
I'd like to understand what causes the difference between the browsers, but more importantly, I'd like all browsers to behave like FF - placing the :after at the end of the longest row. Is that possible?
I put the above code on dabblet
664
You can't add two ::after pseudo-elements to one DOM element. You can however add an ::before additionally. Depending on what you are trying to accomplish, this may work.
One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.
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.)
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.
That's because your a element is set to display inline by default, and Firefox handles positioning within inline elements slightly differently to Chrome and IE.
To fix this in both Chrome and IE (whilst retaining the look in Firefox), simply give your a element an inline-block display:
a {
position:relative;
display:inline-block;
}
Modified Dabblet demo.
182
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
