pseudo-element | 易学教程

Animate the CSS transition property within :after/:before pseudo-classes

阅读更多关于 Animate the CSS transition property within :after/:before pseudo-classes

Is it possible to animate CSS pseudo-classes? Say I have: #foo:after { content: ''; width: 200px; height: 200px; background: red; display: block; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } #foo:hover:after { width: 250px; height: 250px; } Is this even possible? I've been testing and so far I can't seem to find a solution. I'm trying to trim down the amount of JavaScript support I need by using Modernizr. I already have a JavaScript method, so please no JavaScript alternatives. Demo : http://jsfiddle.net/MxTvw/ Litek Your

LESS: using font-awesome in :before

阅读更多关于 LESS: using font-awesome in :before

问题 I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it's :before pseudo-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class. I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in LESS: .bulleted-header { color: #61cbe6; font: 16px 'ds_goose', sans-serif; &:before { content: @fa-var

CSS3 transform difference in Firefox and Chrome and IE

阅读更多关于 CSS3 transform difference in Firefox and Chrome and IE

I think it may have something to do with a pseudo element, but I'm not sure. I am having difficulties with the effect of a transform transition using css3. In Firefox v24, the effect works as I want it to - see the CodePen here http://codepen.io/patrickwc/pen/aKEec but in Chrome and IE, the border effect of the links animate and then suddenly switch back into position. It is difficult to describe so the best way is to look at the effect in Firefox then in Chrome or IE. body { background: #000; color: #fff; } p { text-align: center; } nav.footer-social-links a { position: relative; margin: 0

CSS pseudo-element in inline attribute style

阅读更多关于 CSS pseudo-element in inline attribute style

I have tried with the sample below from the url. What I trying is to apply css pseudo-element in inline attribute, style. Somehow, it seems not working. I would appreciate for any advice. http://www.w3.org/TR/2001/WD-css-style-attr-20010305 <p style="{color: green; width: 10em} ::first-letter {float: left; font-size: 300%}"> This is an example of a paragraph with inline style attribute rules to create a spot effect, in this case, a drop-cap first letter. </p> It’s not possible. The working draft you are referring to is over 12 years old. Click on the link “Latest version” in it, and you’ll

Changing pseudo-element style from javascript

阅读更多关于 Changing pseudo-element style from javascript

How I can change CSS for a pseudo element style? I am trying to get the CSS before:: rule and change left: to 95% or 4px . How can I perform this in my context? I've also made some test using document.querySelector but it doesn't work, I get a compute Read-Only error. Do you have suggestions? Example: css .iziToast-wrapper-bottomLeft .iziToast.iziToast-balloon:before { border-right: 15px solid transparent; border-left: 0 solid transparent; right: auto; left: 8px; } js if(description_iziToast){ let RightMode = event.x>window.innerWidth/2; let bubblePosition = document.getElementsByClassName(

How did CSS `content` property work for `img` element in WebKit?

阅读更多关于 How did CSS `content` property work for `img` element in WebKit?

问题 Long time ago there was a draft of CSS3 Generated Content spec which allowed the content property for any HTML element (not only ::before/::after pseudo-elements), without any formal restriction for empty or replaced elements. It was once supported by Opera Presto (1, 2) and, at least to some extent, by WebKit (3). By the end of 2011, WebKit's implementation of content for img element seemed to effectively convert it from an empty replaced element to non-replaced element like span (even its

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

阅读更多关于 Can I make the CSS :after pseudo element append content outside the element?

问题 I want to format a breadcrumb trail of links using an HTML » entity between adjacent links, so it looks like this: home » about us » history » this page I've added a rule to my CSS: nav#breadcrumb-trail a:after { content: " » "; } but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this: home » about us » history » this page Am I misunderstanding the behaviour of the CSS :after pseudo-element? Documentation seems to imply it adds the specified content after

::before with input in Firefox [duplicate]

阅读更多关于 ::before with input in Firefox [duplicate]

This question already has an answer here: CSS content generation before or after 'input' elements [duplicate] 5 answers I'm trying to put some content before an input tag using CSS pseudo-class ::before . It works in Chrome but not in Firefox. What seems to be the problem with Firefox? Here's a snippet: input::before { content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0px 0px 5px #9F0002 inset; } <input type="radio" name="gender" class="radio" value="male">male <input type="radio" name="gender" class="radio" value="female">female ...and here's the outcome.

IE not coloring :before as table-cell, why?

阅读更多关于 IE not coloring :before as table-cell, why?

<!DOCTYPE html> <html> <head> <style> div:before { display: table-cell; content: "ABC"; color: red; } </style> </head> <body> <div>123</div> </body> </html> I'd expect this to render to something like , but I get instead, only when running on Internet Explorer (any version). Is this a bug or I'm doing something wrong? This appears to be a bug in IE. If you inspect the element in IE 11 Developer Tools, you see all the declarations for the :before pseudo-element struck out (also e.g. font settings if you add them), but the display and content settings affect the rendering. To circumvent this bug

Cannot change the content of visited :before pseudo-elements

阅读更多关于 Cannot change the content of visited :before pseudo-elements

I was trying to add some effects for visited links, then I got this problem. Here is the code: http://dabblet.com/gist/5447894 Only Opera can successfully change the content of :before pseudo-elements. All other browsers are fail. Did I miss anything? Thanks The allowed (= not ignored) CSS properties of visited links are color , background-color , border-*-color , outline-color and, column-rule-color (more under certain circumstances). This is to prevent history stealing attacks. See this article for further details. So you can, technically, set a :before pseudo class for :visited links, but