I think I tried everything and :after simply doesn't want to work with images. Is there any CSS limitation that I'm not aware of? Or did I do something wrong?
Here's the example:
http://jsfiddle.net/vHMRk/
Most browsers don't support :after and :before for img tags: http://lildude.co.uk/after-css-property-for-img-tag
The effect of :after on img is vaguely defined. The spec puts it this way: “Note: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” In practice, it’s unspecified, and there does not seem to be any progress in this are in CSS3 drafts.
Related
I have a <a> tag and with a a:after{content:"(1)"} I can add a text (1) after it. But what if I want to set the color, font of the (1)? Is it possible?
Thanks,
You can use the color property to do so:
a:after{content:"(1)"; color:red;}
Working example:http://jsfiddle.net/f2z8ztvc/
Styling a pseudo-element in CSS is often no different than styling a regular element. The main difference is in the selector, and where the styles will be applied.
The spec describes which CSS properties apply to which pseudo-elements, but for the purposes of this question the :before and :after pseudo-elements behave exactly like their regular counterparts (interestingly, CSS2.1 mentions this explicitly, but Selectors 3 doesn't). So if you want to change the font of your :after pseudo-element, there is nothing stopping you from doing so.
I'm working with css and I have tried to add an element 'before' to my div like an arrow. Is there any way to achieve it? I tried pseudo :before but there are three of them (::before(2), :before and ::before). They make me so confuse, what are differences in between?
The CSS spec on content describes all three syntaxes.
:before -- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax
::before -- new pseudo element syntax. This is equivalent to ::before(1)
::before(n) -- used to create multiple before elements that can be before other ::befores. Details are in the same spec.
As far as I can tell, no browser supports this.
http://jsfiddle.net/535Rf/
I just saw a CSS code that included ::before tag. I looked at MDN to see what the ::before is but I really didn't understand it.
Can someone explain how it works?
Does it make a DOM element before what we select by CSS?
According to those docs, they are equivalent:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version.
Reasoning:
The ::before notation was introduced in CSS 3 in order to establish a
discrimination between pseudo-classes and pseudo-elements. Browsers
also accept the notation :before introduced in CSS 2.
This distinguishes pseudo elements from pseudo classes.
The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
They essentially mean the same thing. The :: was introduced in CSS3 to help descriminate between pseudo elements (like :before and :after) and pseudo classes (like :link and :hover).
I checked out MDN and w3.org, and the best I could come up with is that :: is used for structural changes, and : is used for styling.
They are currently interchangeable for compatibility reasons.
It appears to separate :link (for instance), which styles a <a>, from :before (which is a structural change).
: is for styling, :: is for structure.
One is the CSS2 (:before) way and the other is CSS3 (::before). Currently they are interchangeable in browsers that support CSS2 & CSS3.
Here's a good explanation: http://www.impressivewebs.com/before-after-css3/
I am wondering if there are any other selectors which select only part of an HTML element. I know of these two:
:first-letter
:first-line
But AFAIK there are no other selectors which do this. I am interested in any (even browser-specific) selectors or other methods of manipulating only part of a block of text.
The Use Case
I have (more) control over the .css and .js than over the DOM. I've been using js workarounds but want to include any CSS solutions as well, because I don't like to depend of javascript for my styles.
Even if the solution is only supported in konquerer it is still better than nothing IMO.
Nope, those are the only two content pseudo-elements available that select real text nodes. Nothing new has made it into the CSS3 recommendation.
One of the proposals that didn't make it was ::selection (roughly implemented by Opera, Safari and Chrome, and by Firefox as ::moz-selection), but your use case doesn't really say anything about what you want to do so I have no idea if that selector is relevant to your needs.
I'm not aware of any browser-specific pseudo-elements, but there are also the ::before and ::after pseudo-elements. See the CSS 2.1 specification from the W3C.
I was thinking of using these styles for easier cell rollover effects in a datagrid, but I can't seem to get these styles working on anything other than the most basic of tag.
Is the <a> anchor tag the only element in HTML to support styles like hover, active, visited?
It should work on all elements, but IE6 only supports in on links. I used whatever:hover to work around that.
Modern browsers support the pseudo style properties for all elements, IE6 is the only current wide-spread browser that doesn't (and that's only for the :hover property).
It is unfortunate but until IE6 usage drops below minimal levels, you should avoid using the :hover property on non-anchor elements for better cross-browser support. Alternatively, you can provide IE6 support for it using javascript (with browser detection) or CSS expressions.
According to the CSS2 specification:
CSS doesn't define which elements may be in the above states [:hover, :active, and :focus], or how the states are entered and left.
In other words, don't depend on them working at all. I would use Javascript, along with CSS, to get a wider audience.
PPK has a great reference for browser compatibility here: http://www.quirksmode.org/css/contents.html#t16
It shows the browsers that correctly support the :hover pseudoclass (and lots of other css selectors).
Yes unfortunately anchor is the only tag that supports these styles.
I would recommend the following:
Before coding any of your own JS, try use the JQuery framework, it might save you loads of work.
Another crazy workaround would be to expand the size of the using style to 100% of the parent (cell), this way you would effectively be applying the style to the cell.