css-content

I was trying to add some effects for visited links, then I got this problem. Here is the code: http://dabblet.com/gist/5447894 Only Opera can successfully change the content of :before pseudo-elements. All other browsers are fail. Did I miss anything? Thanks The allowed (= not ignored) CSS properties of visited links are color , background-color , border-*-color , outline-color and, column-rule-color (more under certain circumstances). This is to prevent history stealing attacks. See this article for further details. So you can, technically, set a :before pseudo class for :visited links, but

I'm looking for a way to add an HTML tag for CSS content property inside :after and :before . Unlike this question which only discusses adding symbols like < . What I'm trying to add is something like: .breadcrumbs li a:before { content: '<i class="icon"></i>'; } Is there any possible way to do that? This is impossible. You cannot generate markup from CSS. It should also be unnecessary - stick your background image / icon font / whatever in the generated pseudo-element you have already. This is probably what you want, To put an image to the left of your breadcrumb li links: .breadcrumbs li a:

I have the following CSS code .editable:before { content: url(../images/icons/icon1.png); padding-right:5px; } this is used in conjunction with the following markup: <span class="editable"></span> In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives? Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode. IE8 supports :before , but not and also images as content when not in compatibility

I am using the following CSS, which seems to be working: a.up:after{content: " ↓";} a.down:after{content: " ↑";} The characters however cannot seem to be encoded like this, as the output is literal and shows the actual string: a.up:after{content: " ↓";} a.down:after{content: " ↑";} If I can't encode it, it feels like I should use something such as .append() in jQuery, as that supports the encoding. Any ideas? To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities: a.up:after {

Is there a way to inherit node value into content attribute? Like, if <h2/> tag value is set to "Random title", can I get this value inside content attribute in CSS? I've tried content: inherit; , but it doesn't seem to work. An example of my theory: HTML: <h2>Random title</h2> CSS: h2:after { content: inherit; /* should be "Random title" */ } Thanks in advance! No, there's no way to do that. That's not what inherit is for . The closest you can get is this: <h2 data-title="Random title">Random title</h2> h2:after { content: attr(data-title); } ..which is obviously horrible because of the

This question already has an answer here: Why do the :before and :after pseudo-elements require a 'content' property? 4 answers I'm trying to use the after pseudo element to add some effects to a site. <div class="product-show style-show"> <ul> <li> .... <div class="..."> <div class="readMore less">...</div> <a href="3" class="readMoreLink" onclick="return false;">Read More</a> </div> .... </li> </ul> </div> And stylesheets: .product-show .readMore.less { max-height: 200px; height: 100%; overflow: hidden; } .product-show .readMore.less:after { background: rgba(255, 255, 255, 0); display: block