pseudo-element

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

I’ve got the following CSS to add a PDF icon to any link that links to a PDF: a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);} Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method. No, content only accepts raw text and image data, not HTML. You need to use JavaScript to dynamically add tooltips to your existing

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:

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

I want to know whether it is possible to get a DOM element's ::before content, which was set by CSS3. I have tried some ways, but I still can't make it, so it's very confusing to me! // https://rollbar.com/docs/ const links = document.querySelectorAll(`ul.image-list a`); links[0]; // <a href="/docs/notifier/rollbar-gem/" class="ruby">::before Ruby</a> links[0]; // links[0].textContent; //"Ruby" links[0].innerText; // "Ruby" links[0].innerHTML; // "Ruby" // ??? links[0]::before; This is the case: Pass ":before" as the second parameter to window.getComputedStyle() : console.log(getComputedStyle

Some questions about using CSS to specify the color of selected text: https://developer.mozilla.org/En/CSS/::selection says that, ::selection was drafted for CSS3 Selectors but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue. Why was it removed? Imagine that a rule like the following exists in the default CSS that's implemented by the browser: ::selection { background-color: Highlight; color: HighlightText; } Further imagine that a rule like the following is defined in any site-specific authored stylesheet: body { background-color: white }

Here's the FIDDLE for play around. I have created <div class="foo"> and have a generated CSS content using .foo:after . I want to have that generated content clickable by setting a link. If I wrap the .foo with an anchor it creates a link around .foo and .foo:after . However I want to make the area of .foo:after clickable, but not the .foo itself. Is there a way that I can achieve this using pure CSS? Perhaps changing the markup? HTML <div class="container"> <a href="http://example.com"> <div class="foo"></div> </a> </div> CSS .foo{ width: 400px; height: 150px; background-color: #DFBDE0; }

Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1FD6D; } #image-edges:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1FD6D; } However this does not work. The only thing which happens is that the