pseudo-element

问题 I need to change the margin-top value of p::before dynamically on each image click. Neither of these questions 1 / 2 / 3 / 4 nor this tutorial worked for me since I am changing the margin-top value not content or colors. I can't use attr() because it's not supported for non-string values according to this. Creating stylesheet or adding scripting the the header isn't a good idea since I can't reach and modify it again so it's creating tens of style tags and rules and it's messing up with my

问题 I have made a DIV with visibility: hidden and attached a ::before pseudo-element of this DIV with visibility: visible . This works as expected in Firefox, Chrome and Safari, but in Internet Explorer 10 the pseudo-element does not render. Please explain if I'm accomplishing this wrong, or whether this is an issue with Internet Explorer. Are there any work arounds (we only have access to the CSS, not the source HTML)? JSFiddle demonstrating issue. 回答1: Filters don't work on pseudo elements in

问题 Here's the FIDDLE for play around. I have created <div class="foo"> and have a generated CSS content using .foo:after . I want to have that generated content clickable by setting a link. If I wrap the .foo with an anchor it creates a link around .foo and .foo:after . However I want to make the area of .foo:after clickable, but not the .foo itself. Is there a way that I can achieve this using pure CSS? Perhaps changing the markup? HTML <div class="container"> <a href="http://example.com"> <div

问题 I have some element with :before pseudo selector define. I need to add some transition, animation for it but in CSS it's not possible. So i think that i can do this with jQuery but something is nor working right. Can you help me? This is my code: var pilot = $('#remote_control'), pilot_shadow = $('#remote_control:before'); pilot.on({ mouseenter: function(){ pilot_shadow.animate({ opacity: 0 }); } }); 回答1: If you use http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js When you do this

问题 I have 2 elements that have the same attributes but shown one at a time on the page (When one is shown, the other disappears).The only difference between the two is that the element which is displayed will have the '::before' selector. Is it possible to use an xpath or css selector to retrieve the element based on its id and whether or not it has ::before 回答1: I bet also to try with the javascript solution above. Since ::after & ::before are a pseudo element which allows you to insert content

问题 I am trying to get the value of a CSS attribute "content" with: WebElement plusOrMinusSign = currentEntityTypeLevel1.findElement( By.xpath("i[@class='tree-branch-head']::after")); System.out.println(plusOrMinusSign.getCssValue("content")); However, I get an error: The string 'i[@class='tree-branch-head']::after' is not a valid XPath expression. It seem the " ::after " is not recognised. Html: <i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)">::after </i>

问题 Lets demonstrate an example with simple HTML code like this: <div data-icon="\25B6">Title</div> I would like this element to have an prefix icon set by it's data attribute (data-icon) so I set CSS file like this: div:before { content: attr(data-icon); } My desired output of this example would look like this: ▶Title Instead of desired output all I can get is this: \25B6Title So my question is: what am I doing wrong / what am I missing? JSFiddle example: http://jsfiddle.net/Lqgr9zv6/ 回答1: CSS

问题 From what I understand, :before and :after inserts content before or after the indicated target. I'm not really sure what would be the purpose of this CSS snippet? *, *:before, *:after { -moz-box-sizing: border-box; } 回答1: That applies border-box sizing to all elements as well as any :before and :after pseudo-elements that they may generate. The *:before, *:after portion means the respective pseudo-elements of any element. Once you create specific :before / :after rules later in your

问题 If I have a list of optons, how can I use the CSS pseudo-element :before{ content: '' } to affect the <option> ? Below there are three options an I'd like to insert text before each one. I know this can be done wit javascript / jQuery, but is it possible with CSS? <html> <head> <style> option::before { content: "sandy - " } </style> </head> <body> <select> <option>beach</option> <option>field</option> <option>carpet</option> </select> </body> </html> 回答1: The ::before and ::after pseudo

问题 I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background. I set the selection so that it looks like this in FF. But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transparent the resultant color is nasty. Does anyone know if it's possible to get chrome to behave the same as Firefox. For reference here is my css: p::-moz-selection { background:#FFFF7D; color: