css-content

I have a problem with the IE (what else?): I generate content with CSS which has also a background-image. I looks like that: #nav ul li:after { content: "--"; position: relative; z-index: 99; background: transparent url(image.png); color: transparent; } The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it. How could I make the text transparent/unvisible? I tried already: visibility - opacity - filter - text-indent ... But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.

I want to add a triangle after a div tag.Therefore i used css3 after pseudo-element. But it's not working. Following is my css rule. .header-wrapper .part1 ::after { width: 0; height: 0; border-left: solid 48.35px #f21e1e; border-bottom: solid 48.35px transparent; border-top: solid 48.35px transparent; } Following is my html part <div class="header-wrapper"> <div class="part1"></div> </div> In order for the pseudo element to be generated, you need to specify a content value . The value is otherwise assumed to be the default, none - which is likely why it isn't working in your case. (example)

nav ul:after { content:""; clear:both; display:block; } What does the "" value mean on the content property? Mr. Alien It's just a clearfix, which means, if your ul elements have floated li , than they will be self cleared, it just behaves similar to overflow: hidden; but unlike overflow: hidden; it wont hide the overflowing content. Demo (Without clearfix) Demo 2 (With clearfix) And why you need to clear and what you need to clear, for that, you can refer my answer here As you edited your question, content property is used with :before or :after pseudo to embed virtual content on the page, so

Relevant codepen: http://codepen.io/anon/pen/ocptF/ EDIT: The codepen uses Jade, and thus messes a few things up. I was not aware of this when starting this question. Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case. I'd like to use the CSS attr function to fill in the content for some pseudoelements. However, it prints out 004 when the HTML attribute is set to \f004 , and 08fa when \f08fa . Relevant lines: HTML: <div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div> CSS: .zoomfade:before { content: attr(data-unfill); position:

Lets demonstrate an example with simple HTML code like this: <div data-icon="\25B6">Title</div> I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this: div:before { content: attr(data-icon); } My desired output of this example would look like this: ▶Title Instead of desired output all I can get is this: \25B6Title So my question is: what am I doing wrong / what am I missing? JSFiddle example: http://jsfiddle.net/Lqgr9zv6/ BoltClock CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML

Long time ago there was a draft of CSS3 Generated Content spec which allowed the content property for any HTML element (not only ::before/::after pseudo-elements), without any formal restriction for empty or replaced elements. It was once supported by Opera Presto ( 1 , 2 ) and, at least to some extent, by WebKit ( 3 ). By the end of 2011, WebKit's implementation of content for img element seemed to effectively convert it from an empty replaced element to non-replaced element like span (even its context menu changed, removing options like 'Save image as...'). It also made it possible to apply

I know there are lot's of questions regarding this query here but none of them provide the solution for me. HTML <input id="tb1" type="text" class="note" /> <br> <p class="note1"> This is not done.</p> CSS p.note1:before{ content: "Note:"; } tb1.note:before{ content: "Enter your number"; } I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag. EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system. EDIT2: Forget about my css, is there any way that