pseudo-element

问题 I’ve got the following CSS to add a PDF icon to any link that links to a PDF: a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);} Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method. 回答1: No, content only accepts

问题 I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image . The method doesn't work though. However if I'm trying to set content: "asd"; , the text appears correctly. Basically I just want to have a house image above that triangle. Here's the HTML code: <div id = "estatecorner" class = "house"></div> And here's the CSS: #estatecorner { position: absolute; right: 0px; width: 0; height: 0; border-style: solid;

问题 This question already has answers here : CSS :after not adding content to certain elements (3 answers) Closed 5 years ago . I have an image that kind of slides up from the menu when you hover it. Because it's hidden under the menu i want to give the bottom of the image a little bit of deph by adding a dark fade to the bottom. I figured the best way to achieve this is to use pseudo elements. I don't really care much about IE support as it's such a small detail. So, here's what i've got:

问题 I'm having some trouble getting the generated content of a pseudo-element via Javascript in webkit browsers. Context for those who care: I'm working on a jQuery mobile app and trying to use FontAwesome icons. I was hoping to be able to add them with the same data-icon property that jQM uses for its own built-in icon set. So I've got a script that searches the page for anything with the class ui-icon-whatever and adds the corresponding icon-whatever class for FontAwesome. The trouble is that

问题 I know there are lot's of questions regarding this query here but none of them provide the solution for me. HTML <input id="tb1" type="text" class="note" /> <br> <p class="note1"> This is not done.</p> CSS p.note1:before{ content: "Note:"; } tb1.note:before{ content: "Enter your number"; } I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag. EDIT: I can't add value attribute to input tag and manage css for the desired

问题 I implemented (a modified version of) Gene Locklin's 'depth' which works just fine, here's the code: body:before { height: 10px; width: 110%; position: fixed; top: -10px; left: -10px; z-index: 6; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); box-shadow: 0px 0px 10px rgba(0,0,0,0.8); content: ""; } But I would like to use the :before & :after selectors to add margins or padding, you know some kind of gap, to separate a form from the

问题 Is it possible to use the :after CSS pseudo-element to offset alignment without actually inserting anything in content: "" . It doesn't seem to render unless content is specified so just wondered whether this is possible or if there are any known workarounds. As an example:- .nav-primary li.level0 a:after { content: ""; padding-right: 1px; margin-left: -1px; } As you can see from the example, simply changing the colour of the content would not work in this instance as would still consume

问题 Is it possible to get multiple pseudo elements in one object like this? div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: 'C'; } div::before(3) { content: 'D'; } I have tried it but it doesn't work. 回答1: That syntax is from the old Generated Content level 3 module. It doesn't work because nobody has implemented any part of this module, ever. In fact, the spec itself has been abandoned for years due to lack of interest and implementation, and is pending a low

问题 This question already has answers here : Why do the :before and :after pseudo-elements require a 'content' property? (4 answers) Closed 3 years ago . I have a button and on a hover I want a after element to show. But I can't see it. Is it possible to have a :after element on a button? html: <button class="button button-primary">My button</button> css: .button { cursor: pointer; height: 30px; } .button-primary { border: none; } .button-primary:hover:after { display: block; position: relative;

问题 Right now I've got a paragraph and I'd like to capitalize the entire first line. I've set the first paragraph to an ID "firstp" and tried: #firstp::first-line { text-transform: uppercase; } I've tried it with text-transform: capitalize but that doesn't work either. It's strange because I've managed to change the first letter (changed font size) using #firstp:first-letter . 回答1: text-transform on :first-line is really buggy right now, see the reference here http://reference.sitepoint.com/css