pseudo-element

问题 Here is a fiddle. <p>foo <a class="infolink" href="#">bar</a> baz</p> and a.infolink::before { content: '?'; background: blue; color: white; width: 20ex; height: 20ex; } The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome. 回答1: Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default. Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context. a.infolink:

问题 I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements? /* This works by applying style to all scroll bars in window */ ::-webkit-scrollbar { width: 12px; } /* This does not apply the scrollbar to anything */ div ::-webkit-scrollbar { width: 12px; } In this fiddle, I would like to make the div's scrollbar customized, but the main

问题 I have a set of styled links using the :before to apply an arrow. It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :before part (the arrow). See jsfiddle for example: http://jsfiddle.net/r42e5/1/ Is it possible to remove this? The test-style I sat with #test p a:hover:before does get applied (according to Firebug), but the underline is still there. Any way to avoid this? #test { color: #B2B2B2; } #test p a { color: #B2B2B2; text

问题 I'm particularly interested in understanding when the ::before and ::after pseudo-elements can be applied to self-closing tags. This is the definition of these pseudo-elements, according to the W3 Generated Content CSS Specifications: 12.1 The :before and :after pseudo-elements : Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and

问题 I have a div element with a CSS pseudo-element ::before used as a close button (instead of using an actual button). How do I apply an event listener to only the pseudo-element? HTML <div id="box"></div> CSS #box:before { background-image: url(close.png); content: ''; display: block; height: 20px; position: absolute; top: -10px; right: -10px; width: 20px; } #box { height: 100px; width: 100px; } 回答1: No. The pseudo-element does not exist in the DOM so it has no HTMLElementNode object

问题 I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text. Is there a way to make this work? It's internal for IE8 so browser issues aren't a problem. If I do <span class="linebreakclass">cats are</span> brilliant I want "brilliant" to appear on a new line. 回答1: You won't be able to render HTML tags but you can set style like this: .needs-space:after { content: " "; display: block; clear: both; /* if you need to break floating elements */ }

问题 Does the universal selector * affect pseudo elements like :before and :after ? Let me use an example: When doing this: * { box-sizing: border-box; } ...doesn't the above declaration automatically include/affect pseudo elements like :before and :after as well? Or, in order to affect pseudo elements like :before and :after , one has to declare this? *, *:before, *:after { box-sizing: border-box; } Does this make sense? I have always used just * { box-sizing: border-box; } and never have had any

问题 Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</div> I found that "\a" is a new line in CSS, but still does not work for me. 回答1: Here is how this can work. You need to modify your data attribute as follows: <div data-foo='First line Second Line'>foo</div> and the CSS (proof of concept): [data-foo]:after { content:

问题 I want to create buttons like these: In modern browsers the effect is created using inset box-shadow and filters. For IE8 - pseudo-elements are chosen. For IE7 - I use special tags wrapped in conditional comments. Demo: (http://jsfiddle.net/8M5Tt/68/) /** * Button w/o images */ html { font-size: 62.5%; } body { font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif; } /* layout */ .btn { display: inline-block; height: 28px; border-width: 1px; border-style: solid; width: 170px; box-sizing:

问题 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