pseudo-element

问题 In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox: I tried to find what was causing the dark border in Firefox without success. Here is a jsfiddle and a running snippet demonstrating the problem: .tooltip { position:relative;z-index:1; display:inline-block;padding-right:10px; } .tooltip .info { position:absolute;left:100%;top:-7px; display:block;padding:7px;border:1px solid #cccccc; background:#fff; -webkit-border-radius: 4px; border-radius: 4px;

问题 In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox: I tried to find what was causing the dark border in Firefox without success. Here is a jsfiddle and a running snippet demonstrating the problem: .tooltip { position:relative;z-index:1; display:inline-block;padding-right:10px; } .tooltip .info { position:absolute;left:100%;top:-7px; display:block;padding:7px;border:1px solid #cccccc; background:#fff; -webkit-border-radius: 4px; border-radius: 4px;

问题 I need some help. There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container. Here are the results: https://jsfiddle.net/rsze93wk/3/ Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text

问题 Is it possible to set the CSS of a pseudo-element dynamically? For example: jQuery dynamically styling help container $('#help').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset, "bottom" : -windowHeight, "left" : 200 }); jQuery Attempt at setting the inner border of the help container: $('#help:before').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset }); CSS file for the above #help { opacity: 0.9; filter:alpha(opacity=90); -moz-opacity: 0.9;

问题 Is it possible to set the CSS of a pseudo-element dynamically? For example: jQuery dynamically styling help container $('#help').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset, "bottom" : -windowHeight, "left" : 200 }); jQuery Attempt at setting the inner border of the help container: $('#help:before').css({ "width" : windowWidth - xOffset, "height" : windowHeight - yOffset }); CSS file for the above #help { opacity: 0.9; filter:alpha(opacity=90); -moz-opacity: 0.9;

问题 I am writing some CSS to customise the display of an XML document. Basically I want to customise the display of child elements, and render them similar to HTML OL/UL/LI elements. My XML is structured like this: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style.css"?> <transcription> <turn> <speaker>Speaker Name</speaker> <clause> text here </clause> <clause> one or more clauses </clause> </turn> </transcription> My CSS looks like this: turn { counter-reset: item; } turn

问题 Is it possible in my css file to do something like that?: .myclass:after{ content:"click me"; onclick:"my_function()"; } I want to add after all instances of myclass a clickable text, in the css style sheet. 回答1: Is it possible in my css file to do something like [see code above]? No The important question to ask is why . HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model . CSS has control of the styles , there is no link between CSS and

问题 I have a div called .testimonial-inner and using the :after pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they both look like one natural element. Without box-shadow on the triangle: body { background: #eee } .testimonial-inner { background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 30px; display: block; margin-bottom: 25px; position: relative; -webkit-box-shadow:

问题 I'm creating a form that has required fields. To mark these as required, I'm putting an asterisk (*) as a ::before element and floating it right so it is by the top right hand corner of the field. The issue I'm having is a few of these fields are positioned with CSS Grids and when I add a ::before element to the grid, it is treated as another grid item and pushes everything over to a new grid row. Why is CSS grids treating the ::before element as another grid item? How would I make the

问题 I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements. If so, how would I implement something like this with inline CSS? td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; } 回答1: You can't specify inline styles for pseudo-elements. This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in