pseudo-element

As far as I can tell you can't use :before or :after with text content on an image element? Is this correct? Am I missing something? http://jsfiddle.net/rcztz / I know semantically this isn't correct, I'm using because I'm appending the src to the image using js, but if there's no src I'd like to display alternative content (I could use another div, but it would be nice to just use :after or :before) This is correct. You are not able to use pseudo elements on images As lnrbob says, you cannot use pseudo elements on images. However, put a class on the image and use a background image and you'll

I know I can use CSS :first-line pseudo-elmenent to target and change style of the first line in any block of text (like in this demo: http://jsfiddle.net/6H8sy/ ). So the first line can be found and targeted. I was wondering if there's any way to actually select that text to reuse. Something like $(':first-line') (which doesn't work as it is). Josh Crozier Since you can't select the pseudo element itself, you could replicate the behavior of :first-line , to determine the text. I wrote a quick JS function, similar to the one @Kevin B suggest s. The function initially determines the height of

Long story short, I want to add an absolutely positioned pseudo element after another element, so I simply use the :after pseudo element in my stylesheet. This works like a charm, except in IE7. I should think that :after is supported in IE7, no? The clearfix hack used in Boilerplate works fine, so why not in my example? When I look at the CSS in the style inspector, it does seem to print it out, so it seems to me that it understands it, but I can't see the generated element nonetheless. Am I missing something? .myclass:after { content:""; display:table; width:100px; height:100px; background:

I have html code that I cannot change. I cannot use JS for help. So the only option is CSS. example here: http://jsfiddle.net/4gKPL/ HTML : <!-- code for input --> <div class="form-group complete"> <label>label for text input</label> <input type="text"/> <span class="error-message">This is an error message</span> </div> <!-- code for dropdown --> <div class="form-group complete"> <label>label for select input</label> <div class="custom-selectbox custom-selectbox-form"> <select name="sth" required> <option>a</option> <option>b</option> <option>c</option> <option>d</option> </select> <span class

Related to this question Changing CSS pseudo-element styles via JavaScript , is there any way using javascript that I can access a pseudo-element's style attributes? Jack It depends on the browser. I don't believe IE supports this in any way, but for FireFox and Webkit browsers, you can use the following: window.getComputedStyle(element, pseudo-selector); For example: window.getComputedStyle(document.body, ':before'); See: getComputedStyle 来源： https://stackoverflow.com/questions/13644399/getting-pseudo-element-style-values

From code on this page: http://css-tricks.com/snippets/css/sticky-footer/ .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } Can anyone explain what the .page-wrap:after block is doing? I understand the after pseudo-element but I don't understand what is happening here. Check out when you edit the Codepen demo and remove either .page-wrap:after from the line which sets its height or its display: block property. Then click 'Add content'. Because .page-wrap has a negative margin-bottom, it will only push the