pseudo-element

问题 This is a two-part question, see below. While trying to add a % symbol via CSS to an instance of SVG text using the :after pseudo-element I ran into this problem (JsFiddle provided). I am on Chrome Version 24.0.1312.57. HTML: <span class="percentage2">This is 20</span> <p class="percentage2">This is 20</p> <h1 class="percentage2">This is 20</h1> <div class="wrapper"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="20" y="20" style="fill:black;" class="percentage2">This is 20<

问题 I'm trying to overlay a transparent image over another via the after property. It's not even showing up using this method. I wanna use a base64 encoded image if at all possible. I tried with a regular non-encoded image too. No dice. Anyone have any thoughts? My HTML: <div class="image-container"> <img src="images/sample.jpg" alt="Sample Image" /> </div> My CSS: .image-container { position: relative; width: 183px; height: 137px; overflow: hidden; } .image-container img { position: absolute; }

问题 I am trying to add a ::before and ::after pseudo-element to a menu heading. The pseudo-elements work fine for a regular link outside of the menu. However, when I am trying to apply them to a menu item, the background property is set, but the ::before and ::after properties are not. Here is the relevant CSS: #cssmenu { background-color: #FFFFCC; clear: both; display: inline; float: left; list-style: none; overflow: hidden; text-align: center; text-transform: uppercase; width: 100%; } #cssmenu

问题 I want to build the following layout: Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed. The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too. What i tried: # html <div class="wrapper"> <h1>Das ist ein test</h1> <h2>subheadline<

问题 I have applied some styles on the parent ::before and the anchor element inside doesn't work anymore. It seems that something is overriding the default behavior of the anchor element but I can not figure out what. How can I fix this? .ugallery_item::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition:all 0.8s; opacity:0; background:url("http://placehold.it/14x14") #eabe24 no-repeat center center; } .ugallery_item:hover::before { opacity:0.8; } <div

问题 I want to set a pseudo element of a div on the original div. The problem is that the text of the div is centered. Here is an example: #a:after{ content:"Text"; position:absolute; left:0; color:red; } <div style="width:100%;text-align:center;"> <p id="a">Text</p> </div> Why is the pseudo element not affected by the div style? 回答1: #a:after { content: "Text"; position: absolute; left: 50%; transform: translateX(-50%); color: red; } <div style="width:100%;text-align:center;"> <p id="a">Text</p>

问题 I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto , my pseudo elements :before and :after will disappear due to the overflow property. See: http://jsfiddle.net/accelerate/24xwru1n/ Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work? 回答1: I'm afraid you have to add a

问题 I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions. .buttonSML { background-position:-35px -432px; background-color: transparent; border: none; text-transform: uppercase; font-size: 2.9rem; font-weight: @font-bold; height: 55px; padding: 0 5px; position: relative; .text-shadow(0,0,4px); cursor: pointer; } .buttonSML:before, .buttonSML:after { content: " ";

问题 The expected behaviour (Firefox) The unexpected (Chrome) The JSFiddle demo http://jsfiddle.net/bZaKK/ (try it in Firefox and Chrome to see the difference). The HTML <ul> <li><a href="">List item 1</a></li> <li><a href="">List item 2</a></li> ... <li><a href="">List item 9</a></li> </ul> The CSS ul { position: relative; list-style: none; margin: 0; padding: 0; -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } li:last-child:before { position: absolute; content: " "; display:

问题 Is there a way to disable the box shadow for the part where the pseudo-element arrow resides? Current: or without the negative z-index on the pseudo-element: Desired result : #element { position: relative; width: 100px; height: 100px; background-color: blue; box-shadow: 5px 5px 5px #222; } #element::after { content: ""; width: 25px; height: 25px; background-color: blue; top: 40px; left: 88px; transform: rotate(45deg); position: absolute; z-index: -1; -webkit-filter: drop-shadow(5px 5px 5px