pseudo-element

If we use z-index combined with position: absolute; its possible to place the ::before of a element under itself. There is a good example on another question ( jsfiddle.net/Ldtfpvxy ). Basically <div id="element"></div> #element { position: relative; width: 100px; height: 100px; background-color: blue; } #element::after { content: ""; width: 150px; height: 150px; background-color: red; /* create a new stacking context */ position: absolute; z-index: -1; /* to be below the parent element */ } renders: So the stacking context/order is defined by z-index . But when I apply z-index: 1; to the

I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it's :before pseudo-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class. I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in LESS: .bulleted-header { color: #61cbe6; font: 16px 'ds_goose', sans-serif; &:before { content: @fa-var-bullseye; // font-awesome's bullet icon .fa; // calling font-awesome's class. DOESN'T COMPILE } } The

I am trying to use Selenium to click on a ::after pseudo element. I realize that this cannot be done through the WebDriver directly, but cannot seem to figure out a way to do so with Javascript. Here is what the DOM looks like: <em class="x-btn-split" unselectable="on" id="ext-gen161"> <button type="button" id="ext-gen33" class=" x-btn-text"> <div class="mruIcon"></div> <span>Accounts</span> </button> ::after </em> This is what the above element looks like. The Left hand side of the object is the 'button' element and the :after element is the right hand side with the arrow which would bring

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 am wondering whether the :before and :after pseudo-elements can inherit the height from parent using the inherit value, without the actual element doing so? No. The only way that pseudo-elements can inherit values from the parent of their generating element is when the generating element itself is also inheriting from its parent. This is because inheritance occurs from a parent to a child, one level at a time. For inheritance to work across several levels of descendants, every descendant must inherit . As an example, consider the following HTML: <div class="parent"> <div class="child"> </div

I want to format a breadcrumb trail of links using an HTML » entity between adjacent links, so it looks like this: home » about us » history » this page I've added a rule to my CSS: nav#breadcrumb-trail a:after { content: " » "; } but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this: home » about us » history » this page Am I misunderstanding the behaviour of the CSS :after pseudo-element? Documentation seems to imply it adds the specified content after the specified element, rather than prepending it to the inside of the element's container. Any ideas?

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