pseudo-element

问题 How to write :hover and :visited condition for a:before ? I\'m trying a:before:hover but it\'s not working 回答1: This depends on what you're actually trying to do. If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling

问题 In CSS it is possible to style placeholder text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage). These all share the same basic properties (ie: text styling and color declarations). However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn\'t appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where

问题 This question already has an answer here: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 22 answers For context, this is a followup to an earlier question. Rather than digging through cssRules , I\'d like to base the logic on jQuery selectors that search for the effects of those rules. Given default properties of .commentarea .author:before { background-image: url(http://...); background-position: -9999px -9999px; /* ... */ } that are selectively

问题 I would like to make a button like these one just with CSS without using another element. Button Image Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link. The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length. Has someone

问题 Suppose I want to decorate links to certain file types using an image. I could declare my links as <a href=\'foo.pdf\' class=\'pdflink\'>A File!</a> then have CSS like .pdflink:after { content: url(\'/images/pdf.png\') } Now, this works great, except if pdf.png isn\'t the right size for my link text. I\'d like to be able to tell the browser to scale the :after image, but I can\'t for the life of me find the right syntax. Or is this like background images, where resizing just isn\'t possible?

问题 Just wondering if it\'s possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: \'<a href=\"#top\">Back</a>\'; } this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :) 回答1: Unfortunately, this is not possible. Per the spec: Generated content does not alter the document tree. In particular, it is not fed back to the document language

问题 I am trying to create a triangle shape with the pseudo elements. like the one in the image below. But this is what i get. Here is what i have tried this far. .container .form--container:before { content: \"\"; position: absolute; top: 0px; left: 130px; width: 28px; height: 28px; transform: translate(-1rem, -100%); border-left: 1.5rem solid #979797; border-right: 1.5rem solid #979797; border-bottom: 1.5rem solid white; } 回答1: The issue is with the use of border. you can check this link How do

问题 This question already has answers here : Does :before not work on img elements? (11 answers) CSS :after not adding content to certain elements (3 answers) Closed 5 years ago . 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

问题 Things like a:link or div::after ... Information on the difference seems scarce. 回答1: 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

问题 I\'m currently confused in using the icon in CSS pseudo-elements. There are 4 kind of font-family for fontawesome : Font Awesome 5 Free , Font Awesome 5 Solid , Font Awesome 5 Brands , Font Awesome 5 Regular Here is the HTML : <h1>Hello</h1> Case 1 I use this icon : https://fontawesome.com/icons/twitter?style=brands As you can see, its a brands icon, so font-family : Font Awesome 5 Brands h1:before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto;