pseudo-element

In CSS use “display:none” on the element, but keep its “:after”

by

No, it is not possible. Pseudo elements are rendered like children: <span id=”myspan”>whatever<after></span> And display:none hides the element including all children. EDIT 1 JavaScript is your best option in my opinion. Even without jQuery changing text is not hard: document.getElementById(“myspan”).innerHTML = “*”;​ Demo EDIT 2 However, if you really want to do it with CSS, … Read more

CSS Variables (custom properties) in Pseudo-element “content” Property

by

Edit for clarity: CSS custom properties with integer values can be displayed in a pseudo-element’s content property via a CSS counter. div { –variable: 123; } span:after { counter-reset: variable var(–variable); content: counter(variable); } <div>The variable is <span></span>.</div> .coordinates:before { counter-reset: x var(–x) y var(–y); content: ‘The coordinates are (‘ counter(x) ‘, ‘ counter(y) ‘).’; … Read more

CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?

by

Yes, the second argument to counter() defines the type of counter used, as for the list-style-type from a regular ul or ol; for example: content: counter(chapter, lower-alpha); ul { counter-reset: listStyle; } ul li { margin-left: 1em; counter-increment: listStyle; } ul li::before { margin-right: 1em; content: counter(listStyle, lower-alpha); } <ul> <li>one</li> <li>two</li> <li>three</li> </ul> JS … Read more

CSS data attribute new line character & pseudo-element content value

by

Here is how this can work. You need to modify your data attribute as follows: [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } <div data-foo=’First line &#xa; Second Line’>foo</div> Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/ How It Works Using \a does not work, but the equivalent HTML entity does, &#xa;. According to the … Read more

How to close the new html tag by clicking on its ::backdrop

by

Backdrop clicks can be detected using the dialog bounding rect. var dialog = document.getElementsByTagName(‘dialog’)[0]; dialog.showModal(); dialog.addEventListener(‘click’, function (event) { var rect = dialog.getBoundingClientRect(); var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width); if (!isInDialog) { dialog.close(); } });

Forcing IE8 to rerender/repaint :before/:after pseudo elements

by

Been trying to figure out the same thing. Basically IE8 doesn’t redraw the pseudo elements unless you make a change to the content. So I’ve modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I’ve added width:0 and overflow:hidden to the pseudo elements and then added content:”x” to each colour option where x is an incrementing number … Read more

Copyright Symbol in CSS :after Pseudo-Element

by

CSS doesn’t use HTML’s entities; it uses its own unicode escape sequences. You need to use \00a9 for the copyright symbol. body:after { content:”\00a9 me”; } See here for a cheat-sheet table which shows just about every entity/unicode string you’d ever need: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/