pseudo-element

This question already has an answer here: CSS :after not adding content to certain elements 3 answers I have an image that kind of slides up from the menu when you hover it. Because it's hidden under the menu i want to give the bottom of the image a little bit of deph by adding a dark fade to the bottom. I figured the best way to achieve this is to use pseudo elements. I don't really care much about IE support as it's such a small detail. So, here's what i've got: .header-section .trygg-ehandel-icon { position: absolute; top: 45px; right: 280px; z-index: 0; display: block; // Stripped out some

I want to build the following layout: Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed. The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too. What i tried: # html <div class="wrapper"> <h1>Das ist ein test</h1> <h2>subheadline</h2> </div> #css .wrapper { padding-top: 100px; text-align: center; width: 100%; background-color:

I am trying to get the value of a CSS attribute "content" with: WebElement plusOrMinusSign = currentEntityTypeLevel1.findElement( By.xpath("i[@class='tree-branch-head']::after")); System.out.println(plusOrMinusSign.getCssValue("content")); However, I get an error: The string 'i[@class='tree-branch-head']::after' is not a valid XPath expression. It seem the " ::after " is not recognised. Html: <i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)">::after </i> Css: i:after { content: "-"; } Any idea how to get the value of "content"? gioele You are using By.xpath

see: http://jsfiddle.net/Kq2PY/ the div is relative with z-index 5, and the :after thing is absolute with z-index 2. So shouldn't :after be behind the div? You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent. http://jsfiddle.net/jklm313/Kq2PY/4/ 来源： https://stackoverflow.com/questions/12463061/z-index-not-working-on-pseudo-elements

I'd like to be able to use the ::outside pseudoelement, but apparently none of the major browsers support it (based on my testing today). Is there some kind of JS polyfill that enables this selector? Or is there a good technique for simulating this? You are correct: no browser in existence has implemented any of the new features in the ancient CSS3 Generated and Replaced Content module , so you won't be able to try the proposed pseudo-elements. In fact, they're planning to rewrite the module itself, so the current working draft should be considered abandoned, and unfortunately there's no

Lets demonstrate an example with simple HTML code like this: <div data-icon="\25B6">Title</div> I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this: div:before { content: attr(data-icon); } My desired output of this example would look like this: ▶Title Instead of desired output all I can get is this: \25B6Title So my question is: what am I doing wrong / what am I missing? JSFiddle example: http://jsfiddle.net/Lqgr9zv6/ BoltClock CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML