pseudo-element

Adding box-shadow to a :after pseudo element

by

A filter will work: .shadowed { -webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1)); filter : drop-shadow(0px 2px 2px rgba(130,130,130,1)); -ms-filter : “progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color=”#444″)”; filter : “progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color=”#444″)”; } Working Example : http://codepen.io/tolmark12/pen/JopNeR?editors=110 Learn more at : Creating a true cross browser drop shadow

Why not :visited instead of a:visited for links?

by

TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited and :visited. However, using a:visited is best practice for future-proofing your code. TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited. There is now a functional difference between a:visited and :visited! Beware. … Read more

Can I make the CSS :after pseudo element append content outside the element?

by

The spec says: As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. Note the key phrase at the end of this sentence, which refers to the inner content (or inner text). So, the pseudo-elements are inserted into the beginning of the end … Read more

Does the shadow DOM replace ::before and ::after?

by

CSS Scoping spec author here. The answer is actually, officially… undefined! I didn’t think about this interaction when I was writing the Scoping spec. I’ll send an email to the list, and we’ll figure it out. Almost certainly, we’ll settle on whatever browsers currently do (which appears to be letting ::before/after work “as expected” even … Read more

Can I target a :before or :after pseudo-element with a sibling combinator?

by

You can’t target :after since it’s content is not rendered in the DOM and it does not manipulate it – for this to work the DOM would have to be re-rendered and CSS can’t manipulate it like this. Check the specification for detailed understanding: http://www.w3.org/TR/CSS2/generate.html#propdef-content Generated content does not alter the document tree. In particular, … Read more

Changing CSS pseudo-element styles via JavaScript [duplicate]

by

If you’re comfortable with some graceful degradation in older browsers you can use CSS Vars. Definitely the easiest of the methods I’ve seen here and elsewhere. So in your CSS you can write: #editor { –scrollbar-background: #ccc; } #editor::-webkit-scrollbar-thumb:vertical { /* Fallback */ background-color: #ccc; /* Dynamic value */ background-color: var(–scrollbar-background); } Then in your … Read more

sass :first-child not working

by

While @Andre is correct that there are issues with pseudo elements and their support, especially in older (IE) browsers, that support is improving all the time. As for your question of, are there any issues, I’d say I’ve not really seen any, although the syntax for the pseudo-element can be a bit tricky, especially when … Read more