pseudo-element

This question already has an answer here: Why do the :before and :after pseudo-elements require a 'content' property? 4 answers I'm trying to use the after pseudo element to add some effects to a site. <div class="product-show style-show"> <ul> <li> .... <div class="..."> <div class="readMore less">...</div> <a href="3" class="readMoreLink" onclick="return false;">Read More</a> </div> .... </li> </ul> </div> And stylesheets: .product-show .readMore.less { max-height: 200px; height: 100%; overflow: hidden; } .product-show .readMore.less:after { background: rgba(255, 255, 255, 0); display: block

I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this? This is what I had but outline does not work with IE: outline: 2px solid #36F; border: 2px solid #390; Thanks. You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1. I threw a demo up on jsfiddle for

I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code. Link: http://jsfiddle.net/Vv6Eb/4/ HTML: <div></div> CSS: div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px;

I'm experimenting with some styles on <textarea> s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work. The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input ), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2? in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element. I tried something like <div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'"> it didn't work. I also tried this <div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'"> dfsq No it's not possible. It is actually not an Angular issue: pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can

As defined here: http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment You can use code like the following to increment numbers in pseudo elements. H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Is there a way you can use the same code to increment letters like "a", "b", "c", etc? Thank you! Yes, the second argument to counter() defines the type of counter used, as for the