pseudo-element

Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?

由 走远了吗. 提交于 2019-11-26 08:26:17
问题 On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after , but when I try it seems it does... see JSBin Am I doing something wrong? I thought ::before and ::after would be nice tools to hide stuff from IE9, when in fact, they don\'t. 回答1: The CSS2 pseudo-elements :before and :after , with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3. The double-colon notation, on the other hand, is new to CSS3. IE9

Which elements support the ::before and ::after pseudo-elements?

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-11-26 08:25:37
问题 I\'m trying to come up with some good default styling for <input> s in HTML5 and tried the following: input::after { display: inline; } input:valid::after { content: \' ✓ \'; color: #ddf0dd; } input:invalid::after { content: \' ✗ \'; color: #f0dddd; } Alas, the ::after content never shows up. It\'s not a problem with double- versus single colons for the pseudo-elements; I\'ve tried both. It\'s also not a problem with having a pseudo-element and a pseudo-class; I\'ve tried it without the

Z-index with before pseudo-element

由 与世无争的帅哥 提交于 2019-11-26 07:41:28
问题 I\'ve created a \'header\' element with a before-pseudo element. the pseudeo element must be behind the parent element. Everything works great till the moment I give my \'header\' a z-index. What I want: The yellow \'header\' on the foreground, the red pseudo-element in the background and a simple z-index of 30 on the yellow \'header\' element. header { background: yellow; position:relative; height: 100px; width: 100px; z-index:30; /*This is the problem*/ } header::before { content:\"Hide you

“text-decoration” and the “:after” pseudo-element, revisited

由 旧时模样 提交于 2019-11-26 07:39:27
问题 I\'m re-asking this question because its answers didn\'t work in my case. In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class. a:after { content: \" <\" attr(href) \">\"; text-decoration: none; color: #000000; } In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to

CSS :before on inline SVG

由 梦想的初衷 提交于 2019-11-26 06:44:56
问题 Update Thanks porneL for pointing out the relation between generated content and replaced elements. I found this article which deals with this very topic: http://red-team-design.com/css-generated-content-replaced-elements/ Interestingly enough, a W3C document titled \"CSS3 Generated and Replaced Content Module\" (from 11 years ago!) defines the pseudo-element :outside , which could offer a solution to using generated content with replaced elements, by placing the generated content outside the

Can I have multiple :before pseudo-elements for the same element?

由 落花浮王杯 提交于 2019-11-26 05:31:48
问题 Is it possible to have multiple :before pseudos for the same element? .circle:before { content: \"\\25CF\"; font-size: 19px; } .now:before{ content: \"Now\"; font-size: 19px; color: black; } I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them. 回答1: In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element —

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

由 ╄→гoц情女王★ 提交于 2019-11-26 04:54:11
问题 Is there a reason why this CSS doesn\'t work? http://jsfiddle.net/6v5BZ/ a[href^=\"http\"]:after { content:\"\"; width:10px; height:10px; display:inline-block; background-color:red; } a[href^=\"http\"] img ~ :after { display:none; } .. on this HTML? <a href=\"http://google.com\">Test</a> <a href=\"http://google.com\"> <img src=\"https://www.google.com/logos/classicplus.png\"> </a> The idea is to have a pseudo-element on matching anchor tags. But I do not want it to apply to anchor tags that

Why don&#39;t :before and :after pseudo elements work with `img` elements? [duplicate]

由 倖福魔咒の 提交于 2019-11-26 04:53:21
This question already has an answer here: Does :before not work on img elements? 9 answers CSS :after not adding content to certain elements 3 answers I am trying to use a :before pseudo element with an img element. Consider this HTML and CSS... HTML <img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" /> CSS img:before { content: "hello"; } jsFiddle . This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a div or span element. Why not? Is there a way to make pseudo elements work with img elements? alex The spec says ... Note. This

CSS pseudo elements in React

由 ╄→尐↘猪︶ㄣ 提交于 2019-11-26 04:46:42
问题 I\'m building React components. I have added CSS inline in the components as suggested in this brilliant presentation by one of the guys behind React. I\'ve been trying all night to find a way to add CSS pseudo classes inline, like on the slide titled \"::after\" in the presentation. Unfortunately, I do not just need to add the content:\"\"; property, but also position:absolute; -webkit-filter: blur(10px) saturate(2); . The slides show how to add content through {/* … */} , but how would you

What is the difference between a pseudo-class and a pseudo-element in CSS?

由 大憨熊 提交于 2019-11-26 03:40:30
Things like a:link or div::after ... Information on the difference seems scarce. The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway. Pseudo-classes Official description The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a "colon" ( : ) followed by the name of the pseudo-class and optionally by a value between parentheses. Pseudo-classes are allowed in all sequences of simple
订阅 pseudo-element