pseudo-element

Relevant codepen: http://codepen.io/anon/pen/ocptF/ EDIT: The codepen uses Jade, and thus messes a few things up. I was not aware of this when starting this question. Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case. I'd like to use the CSS attr function to fill in the content for some pseudoelements. However, it prints out 004 when the HTML attribute is set to \f004 , and 08fa when \f08fa . Relevant lines: HTML: <div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div> CSS: .zoomfade:before { content: attr(data-unfill); position:

http://www.wordherd.co/#features On this site, when I try to look at the source image file of any of the icons (like "Directions") using Firebug, it displays some sort of unicode for the content. How do you get to the source image files? I'm trying to understand the hack they are using to prevent the images from being accessible. Josh Crozier These "images" are icons fonts. They are usually added via :before / :after pseudo elements. In this instance, the content value is an ASCII representation of an external font library character. .icon-flag:before { content: "\f024"; } In order for this to

This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working. If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What? <button type="submit" class="flat-button">Submit</button> <style> .flat-button { float: left; position: relative; border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -webkit-border

I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly. Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background. I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome! Here's my CSS: html { background-image: url('images/template/html-bg.jpg

I have 2 elements that have the same attributes but shown one at a time on the page (When one is shown, the other disappears).The only difference between the two is that the element which is displayed will have the '::before' selector. Is it possible to use an xpath or css selector to retrieve the element based on its id and whether or not it has ::before I bet also to try with the javascript solution above. Since ::after & ::before are a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the

I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image . The method doesn't work though. However if I'm trying to set content: "asd"; , the text appears correctly. Basically I just want to have a house image above that triangle. Here's the HTML code: <div id = "estatecorner" class = "house"></div> And here's the CSS: #estatecorner { position: absolute; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent #67b2e4 transparent transparent; } #estatecorner