css-content

I'm trying to overlay a transparent image over another via the after property. It's not even showing up using this method. I wanna use a base64 encoded image if at all possible. I tried with a regular non-encoded image too. No dice. Anyone have any thoughts? My HTML: <div class="image-container"> <img src="images/sample.jpg" alt="Sample Image" /> </div> My CSS: .image-container { position: relative; width: 183px; height: 137px; overflow: hidden; } .image-container img { position: absolute; } .image-container img:after { display: block; position: absolute; margin-top: -50%; width: 183px; height

This question already has answers here : Can I use a :before or :after pseudo-element on an input field? (20 answers) I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have: input[type=checkbox]::after { content: url(images/unchecked_after.gif); position:relative; left:15px; z-index:100; } input[type=checkbox]:checked::after { content:""; } It works in Chrome but doesn't seem to be working in Firefox or IE. What

HTML: <p>Hover</p> CSS: p::after { content: " here"; transition: all 1s; } p:hover::after { font-size: 200%; color: red; } Live demo: http://jsfiddle.net/SPHzj/13/ (works in Firefox and Chrome) As you can see, I've set up CSS transitions on the ::after pseudo-element of the paragraph. Then, when the paragraph is hovered, two new styles apply for the pseudo-element which are transitioned. This works in Firefox and Chrome, but not in IE10. My reasoning was that IE doesn't understand the p:hover::after selector, as it works in IE if you set the hover on an ancestor element, e.g. div:hover p:

On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax. a.some-link:before { font-family: icons; display: inline-block; padding-right: 0.3em; content: 'x'; } However, when this link is at the beginning of a line, it's sometimes separated from its icon: I tried adding white-space: nowrap to the CSS rule above but that didn't help. How do I keep the icon and the text together? (CSS 3 is okay) Note: I don't want to format the whole link with white-space: nowrap . James Donnelly Simply removing the display:inline-block; seems to fix this issue: a

This question already has answers here : How can I make generated content selectable? (2 answers) Let's say I have mark up: <div data-generated="world!">Hello </div> ..with CSS: div:after { content: attr(data-generated); } This produces the text: Hello world! - FIDDLE div:after { content: attr(data-generated); } <div data-generated="world!">Hello </div> BUT... If I try to select / Copy the text - only the 'hello ' part is selectable. Is there any way to select css generated text? NB: 1) I have looked at the spec ( here and here ) regarding generated content and I haven't seen any reference to

This question already has answers here : Why do the :before and :after pseudo-elements require a 'content' property? (4 answers) I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines: .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } If I take away content:"" , it ruins the effect, and I don't understand why it's necessary. Why is it needed to add an empty content to :after and :before pseudo-elements? You cannot style generated content without defining what that content should be. If you don’t really need any content, just an