pseudo-element

CSS variables not working in dialog::backdrop

by

Updated answer (29/02/2024) As pointed out by Wes Goulet, this will change (or has changed) and we may have the expected behaviour of the original poster. So, the following probably works on all major browsers: document.querySelector(‘dialog’).showModal(); :root { –color-backdrop: red; } dialog::backdrop { background: var(–color-backdrop); } <dialog> <p>This is a dialog. My backdrop should be … Read more

Why do I need an empty `content` property on an ::after pseudo-element? [duplicate]

by

You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: ”) and just style that. It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/ By the way, the snippet you posted is … Read more

CSS3 ::selection behaves differently in FF & Chrome

by

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: http://jsfiddle.net/tw16/m8End/ p::-moz-selection { background:rgba(255, 255, 125, 0.99); color:#032764; } p::-webkit-selection { background:rgba(255, 255, 125, 0.99); color:#032764; } p::selection { … Read more

CSS :after content below a select element causes click not to work

by

The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed. Updated Example .select:after { position:absolute; bottom:.15em; top:.15em; right:.5rem; content:’\2193′; pointer-events: none; } (Just take browser support for the property into consideration.)

Change style of pseudo elements in angular2

by

You can achieve what you need with CSS variables. In your style sheet you can set the background image like this: .featured-image:after { content: ”; background-image: var(–featured-image); } After that you can programmatically set this variable on the same element or higher up in the DOM tree: <div class=”featured-image” [ngStyle]=”{‘–featured-image’: featuredImage}”> More about CSS variables … Read more

Modify css style for pseudo element :after content with Jquery [duplicate]

by

There is a much easier way: just set the pseudo element’s content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets … Read more

How to position :before & :after pseudo-elements on top of each other?

by

:before (or ::before) is treated as the first child of the element it is being applied to, whilst :after (or ::after) is treated as the last child. Therefore, :after would naturally cover :before. https://developer.mozilla.org/en-US/docs/Web/CSS/::before https://developer.mozilla.org/en-US/docs/Web/CSS/::after I imagine the best way to make sure they line up would be to use position: relative; on label and … Read more

Pseudo-element after not showing? [duplicate]

by

You don’t seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: “” and display: inline-block: .help-tip::after { content: “”; display: inline-block; cursor: pointer; width: 10px; height: 10px; background-repeat: no-repeat; background-image: url(“/assets/small-help-icon.gif”); }