pseudo-element

I want to add absolutely positioned element as an :after (of :before ) of a table row. Look at this http://jsbin.com/IGumoye/5/edit I assume that when I add such element rendering engine (at least Webkit based) think it is a table cell of some kind. :before works badly in all browsers. But :after works very well in Firefox and almost good in webkit. In webkit it keep small space and makes whole table width bigger. - This is what bothers me in webkit. How to fix this? And where can I read about why it happening? UPDATE 1 Possible solution: Use first table cell in this row as a host for

I can do div:after { content: "hello" } But can I have the hello text with a title so that when I hover it with the mouse, the title is displayed? Thanks Paulie_D You don't need a pseudo-element for that: p { background:lightblue; padding:15px; margin:15px; } <p class="hover-me" title="I Show up on Hover">Some Text</p> However, if you need to use a pseudo element p { background:lightblue; padding:15px; margin:15px; position: relative; } p:hover:after { position: absolute; content:attr(data-title); left:0; top:0; width:200px; height:1.25rem; background-color: blue; color:white; } <p class=

This question already has an answer here: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 21 answers How to change the :before content of #abc style from javascript ? <script> document.getElementById('abc').style.content='-'; </script> <style> #abc:before{content:"+";} </style> No, you cannot access :before or :after from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes: <script> document.getElementById('abc').className = "minus"; </script> <style> #abc:before {content: "+";} #abc.minus

I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size. In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values). It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render? I want to keep the HTML to just the

This question already has an answer here: Can I have multiple :before pseudo-elements for the same element? 2 answers I'm using :before to tag links to user profiles with a symbol to characterise the user, examples include "administrator", "inactive user", "newbie" and so on. The thing is, it's possible for more than one to apply. So what happens if more than one class on the link define a :before pseudo-element with content ? Does the most specific selector override the first? Or do they both appear in order? Whatever happens, is it reliable behaviour? The most specific selector takes

It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class). Here is a JS Fiddle: http://jsfiddle.net/9N35f/ I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9. The question: Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+ Is there a bug report for this somewhere? Or is it actually by the standards? IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the