pseudo-element | 易学教程

CSS double border (2 colors) without using outline?

阅读更多关于 CSS double border (2 colors) without using outline?

问题 I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this? This is what I had but outline does not work with IE: outline: 2px solid #36F; border: 2px solid #390; Thanks. 回答1: You can add multiple borders using pseudo elements, and then place them around your original border. No

Use javascript to click on a pseudo-element?

阅读更多关于 Use javascript to click on a pseudo-element?

问题 I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code. Link: http://jsfiddle.net/Vv6Eb/4/ HTML: <div></div> CSS: div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div:before { content:""; display:block;

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

阅读更多关于 Can I target a :before or :after pseudo-element with a sibling combinator?

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 wrap an image. And since I can't target anchors using something like a < img , I figured the maybe I could target the

Can a ::before selector be used with a <textarea>?

阅读更多关于 Can a ::before selector be used with a ?

问题 I'm experimenting with some styles on <textarea> s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work. 回答1: The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input ), because the generated content of the pseudo-element gets placed

CSS3 transitions on pseudo-elements (:after, :before) not working?

阅读更多关于 CSS3 transitions on pseudo-elements (:after, :before) not working?

问题 I'm showing the title attribute of a link on :hover . The title attribute is appended to the link via :after … Now I'm wondering how I can animate the opacity of the :after pseudo-element when hovering-in and hovering-out. html <a class="link" href="#" title="something"></a> css .link { display:block; width:50px; height:50px; background:red; } .link:after { position:relative; content: attr(title); top:55px; color:$blue; zoom: 1; filter: alpha(opacity=00); opacity: 0; -webkit-transition:

Change style of pseudo elements in angular2

阅读更多关于 Change style of pseudo elements in angular2

问题 Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2? in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element. I tried something like <div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'"> it didn't work. I also tried this <div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'"> 回答1: No it's not possible. It is actually not an Angular

Should I use single or double colon notation for pseudo-elements?

阅读更多关于 Should I use single or double colon notation for pseudo-elements?

Since IE7 and IE8 don't support the double-colon notation for pseudo-elements (e.g. ::after or ::first-letter ), and since modern browsers support the single-colon notation (e.g. :after ) for backwards compatibility, should I use solely the single-colon notation and when IE8's market share drops to a negligible level go back and find/replace in my code base? Or should I include both: .foo:after, .foo::after { /*styles*/ } Using double alone seems silly if I care about IE8 users (the poor dears). user123444555621 Do not use both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user

css rotate a pseudo :after or :before content:“”

阅读更多关于 css rotate a pseudo :after or :before content:“”

问题 anyway to make a rotation work on the pseudo content:"\24B6"? I'm trying to rotate a unicode symbol. 回答1: Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them: #whatever:after { content:"\24B6"; display: inline-block; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } <div id="whatever">Some

Can you apply a width to a :before/:after pseudo-element (content:url(image))?

阅读更多关于 Can you apply a width to a :before/:after pseudo-element (content:url(image))?

问题 This is in addition to my recent question: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)? JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/ I'm trying to use pseudo-elements to "clearfix" absolutely positioned images. I have gotten as far as getting the same image to display behind the slides, but cannot seem to apply widths to the inserted image. Am I crazy, or can you NOT apply widths to pseudo elements whose

How to get pseudo element? [duplicate]

阅读更多关于 How to get pseudo element? [duplicate]

问题 This question already has answers here : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery (22 answers) Closed last month . I need to get :after and assign it to variable. It is possible? querySelectorAll doesn\'t work. alert(some_div_with_pseudo.querySelectorAll(\'::after\')[0]) // undefined 回答1: The short answer is that you can’t. It’s not there yet. JavaScript has access to the DOM, which is built when the page is loaded from HTML, and modified