pseudo-element

Here is a fiddle. <p>foo <a class="infolink" href="#">bar</a> baz</p> and a.infolink::before { content: '?'; background: blue; color: white; width: 20ex; height: 20ex; } The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome. Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default. Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context. a.infolink::before { content: '?'; display: inline-block; background: blue; color: white; width: 20px; height: 20px; }

I have a CSS class Modal which is absolutely positioned, z-indexed above it's parent, and nicely positioned with JQuery. I want to add a caret image (^) to the top of the modal box and was looking at using the :before CSS pseudo selector to do this cleanly. The image needs to be absolutely positioned and z-indexed above the modal, but I haven't found any way to add the appropriate class to the image in the content attribute: .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } Second best option

Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification? It's pseudo- class vs pseudo- element distinction. Except for ::first-line , ::first-letter , ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo- elements require double colons. Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first

I'm trying to get some UI flagging on form elements for the user after validation to work using the placeholder pseudo elements (starting with text boxes). What I want is the ::input-placeholder::after pseudo element to be shown when there is both a value in the text box as well as when there isn't a value in the text box (e.g. when an invalid value is present or when a value is required - should show the red "X" in the far right of the textbox via the ::input-placeholder::after pseudo-element). Here's the fiddle: https://jsfiddle.net/edsinek/L8u7s25d/ Here's a snippet of the CSS I'm using to

I'm having some difficulty finding a solution to style a hr element to my preference. If you look at the following fiddle you will see the hr element has both :before and :after pseudos added to it. http://jsfiddle.net/MattStrange/LGEjp/ So far this is what i want, both circles on either side is correct but now i want to add an image to the exact center of the line, but because both pseudos are taken up i'm not sure how to add a background image to this hr. <hr class="bolt"> hr { border: 0 solid #eeedef; border-top-width: 1px; height: 0; margin-top: 60px; margin-bottom: 60px; float: left;

I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code: h1, h2, h3, h4, h5, h6, button, input, select, textarea, :-ms-input-placeholder, ::-moz-placeholder, :-moz-placeholder, ::-webkit-input-placeholder { font-family:some font name; } The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do

This question already has an answer here: “text-decoration” and the “:after” pseudo-element, revisited 11 answers Like all right-thinking people, I hate to click on a link and discover too late that it leads to a browser-crippling PDF or Microsoft Office file. I thought I'd make life a bit easier for people by displaying a little icon next to links that lead to such files. With IE8 finally supporting the :after pseudo-element, I thought the CSS declaration would be fairly simple: a.file_pdf:after { content:url('/images/pdf.png'); text-decoration: none; padding-left: 5px; } In IE8, this works

I have made a Fiddle for reference: http://jsfiddle.net/xypQY/ Which element would i apply WebKit transitions on to achieve a Fade In effect using opacity? This is a webkit bug, transitions do not work in Chrome or Safari on pseudo-elements. Please star this bug to hopefully help the ball get rolling on a fix: Issue 54699: CSS3 transition not applied for pseudo elements It has been reported to Webkit: Bug 23209 - Transitions and animations do not apply to CSS generated content so hopefully it will be fixed soon. UPDATE: Support for transitions was added to Webkit on 01/02/2013: https://trac

In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox: I tried to find what was causing the dark border in Firefox without success. Here is a jsfiddle and a running snippet demonstrating the problem: .tooltip { position:relative;z-index:1; display:inline-block;padding-right:10px; } .tooltip .info { position:absolute;left:100%;top:-7px; display:block;padding:7px;border:1px solid #cccccc; background:#fff; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2); box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, .2); }