pseudo-element

问题 I want to test my placeholder style in chrome devtools but can't find it. I tried to use the "Toggle Element State" but it provides only :hover :active :focus-within :focus :visited These are my css lines: .inputs-wrapper input[type="text"]::placeholder , .inputs-wrapper input[type="tel"]::placeholder{ font-weight:900; color:black; } html: <div class="inputs-wrapper"> <input type="text" placeholder="שם מלא"/> <input type="tel" placeholder="טלפון"/> <input type="submit" value="המשך > " /> <

问题 I created a pseudo element which transitions width to reveal a second pseudo element below of a different colour. It's working in all browsers except IE where the pseudo element becomes 100% of the page width when hovering off the element. What gives? <span>Hello world</span> <style> span{ position: relative; font-size: 64px; } span:before, span:after{ position: absolute; content: ""; left: 0; bottom: -3px; width: 100%; height: 5px; transition: all 1s ease; } span:before{ background: green; }

问题 In this reference At the bottom of the description, They state that the ::selection selector can use the outline property, but I haven't been able to get this to work. How do I affect outline with this selector properly? 回答1: An important note from the Mozilla Developer Network: The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments. Which browser supports which properties on this pseudo-element is largely

问题 To style inputs of type " checkbox " and " radio " if they are mandatory I created some css information: input[type=checkbox].is-mandatory::before { position: absolute; left: -5px; top: -5px; border: solid 1px #A94442; border-radius: 4px; width: 22px; height: 22px; content: ""; } input[type=checkbox].is-mandatory::after { position: absolute; left: -4px; top: -4px; border: solid 4px #F2DEDE; border-radius: 4px; width: 20px; height: 20px; content: ""; } <div class="checkbox"> <label> <input

问题 I'm trying to have a popup appear when hovering over a div. It is working properly, I think, except that the div calling the popup expands in size to whatever the popup is. Here is my jsfiddle. I placed a border around the main div. When you mouse over the text, you will see how that div expands. Is there a way to not have its height affected? Also, I adapted this code from here. I don't understand the purpose of #dsspan:after . If I remove that completely nothing seems to change. Maybe I don

问题 On this LIVE DEMO you can see an icon, which is several times bigger on IE 11 than on any other normal browser (FF/Opera/Chrome) Size must be 12 em as seen on code, but it differs quite a bit between browsers: .titlePanel [class^="icon-"]:before, .titlePanel[class*="icon-"]:before{ font-size: 12em; left: 79%; line-height: 100%; margin: 0 0 0 50px; position: absolute; z-index: -5000; } 回答1: As explained on this one of the many bugs on our beloved IE, pseudo-selectors apply multiple CSS rules

问题 demo the key css #tab-1:before { content:""; display: block; width: 100%; height: 100%; background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat; top: 10px; position: relative; } I wanted to set background-image inside gray-colored box with 100% width and 100% height right after using pseudo :before edit I want to do like this but not like this Or not like this 回答1: please use this code http://jsfiddle.net/YUj5W/4/ .tab

问题 In Chrome and Opera, it appears that :first-line rules apply to the :after pseudo-element as well, and cannot be overridden with !important or normal CSS weighting. For example, I have a series of rules on an H2 element like so (jsfiddle here) CSS h2.dotted { position: relative; font-size: 20px; } h2.dotted.first:first-line { font-size: 30px; } h2.dotted:after { content: "............................................"; font-size: 10px !important; position: absolute; bottom:-1em; left: 0; width

问题 On writing-up an answer for a different question on SO, I made this snippet: @import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light'); /* relevant CSS */ div { position: relative; } div::before { content: ''; position: absolute; top: 0; left:0; } div>span { position:relative; z-index:0; } /* rest is just styling - should be irrelevant for the question */ div { font: normal normal normal 2rem/1 'Shadows Into Light', cursive; color: white; text-align:center; margin: 1rem;

问题 So I have HTML markup that looks like this: <a href="#" data-icon="data:image/png;base64,iVKAInsdal...">Some link</a> Then I want to use that data-icon in my CSS to display as the base 64 background image. Something like: a:before { content: ""; width: 16px; height: 16px; padding-left: 16px; background: url(attr(data-icon)); // this doesn't work } Is there any way to do this? 回答1: This IS possible! (but not how you may think) a{ background-image:url(https://encrypted-tbn2.gstatic.com/images?q