pseudo-element

I have created a pseudo element to sit over an unordered list, the css is as follows: .pricing-column.featured::after { content: "Most Popular"; background: #52BDE6 none repeat scroll 0% 0%; color: #FFF; width: 80px; border-radius: 100%; position: absolute; top: -10px; left: -10px; z-index: 1000; text-transform: uppercase; font-weight: 700; font-size: 0.9em; line-height: 0.9em; padding: 10px; display: inline-block; height: 80px; } However, with this, the text inside the pseudo element sits at the top of my element - is there a way to center it vertically? Here is a fiddle http://jsfiddle.net

I have a flyout menu where at the end of "Quick Links" I use the :after pseudo-element on the first LI tag to display an icon from a sprite file. The HTML: <ul class="rs-quick-links-nav"> <li> <a href="#">QUICK LINKS</a> <ul> <li><a href="#">Enhanced Recipe Search</a></li> <li><a href="#">Recipe Collections & Favorites</a></li> <li><a href="#">Cooking Tips & Techniques</a></li> <li><a href="#">Shopping & Storing</a></li> <li><a href="#">Tools & Products</a></li> <li><a href="#">New Uses for Old Things</a></li> <li><a href="#">Guide to Ingredients</a></li> </ul> </li> </ul> The CSS: .rs-quick

This is a two-part question, see below. While trying to add a % symbol via CSS to an instance of SVG text using the :after pseudo-element I ran into this problem ( JsFiddle provided). I am on Chrome Version 24.0.1312.57. HTML: <span class="percentage2">This is 20</span> <p class="percentage2">This is 20</p> <h1 class="percentage2">This is 20</h1> <div class="wrapper"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="20" y="20" style="fill:black;" class="percentage2">This is 20</text> </svg> </div> CSS: .wrapper { width: 300px; height:80px; overflow:hidden; } .percentage2:after {

I've created a scraper to grab some product names from a webpage. It is working smoothly. I've used CSS selectors to do the job. However, the only thing I can't understand is the difference between the selectors a::text and a ::text (don't overlook the space between a and ::text in the latter). When I run my script, I get the same exact result no matter which selector I choose. import requests from scrapy import Selector res = requests.get("https://www.kipling.com/uk-en/sale/type/all-sale/?limit=all#") sel = Selector(res) for item in sel.css(".product-list-product-wrapper"): title = item.css("

<pseudo> </pseudo> ? The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow. What is the element type of a pseudo element? And can we programmatically create them, without using CSS? Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different

I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images. http://jsfiddle.net/necolas/KbNq7/ This particular line from the example mentions: Although this method will only produce the full effect in Firefox 4, other browsers will eventually catch up and apply transitions to pseudo-elements . What is a pseudo-element? Jason Gennaro Pseudo-elements are CSS selectors that manipulate parts of an element in a special way. They include: :first-line :before :after Application Pseudo elements are applied like so p:first-letter{ color:black; font-style

I have made a DIV with visibility: hidden and attached a ::before pseudo-element of this DIV with visibility: visible . This works as expected in Firefox, Chrome and Safari, but in Internet Explorer 10 the pseudo-element does not render. Please explain if I'm accomplishing this wrong, or whether this is an issue with Internet Explorer. Are there any work arounds (we only have access to the CSS, not the source HTML)? JSFiddle demonstrating issue . Filters don't work on pseudo elements in IE. Read: msdn Other specified styling properties apply to the appearance of the inserted content, not to