pseudo-element

问题 I would like to put unicode in the data-content attribute using JQuery so as to use it for pseudo element content, but I can't find the right format. How do you display unicode? The fallowing just displays ▼ . a::after { content: attr(data-content); } <a href="...">...</a> $("a").attr ("data-content", "▼"); 回答1: Insert in this format, using the \u that, in Javascript, denotes an Unicode number inside a string literal $("a").attr ("data-content", "\u25BC"); From MDN Unicode escape docs: You

问题 OK to be clear, I am not trying to make the (pseudo)inception for css. Just wanted to check if it's possible to add a pseudo class on a pseudo element. For eg: .some-class:after:hover { } doesnt seem to work. This works though: .some-class:hover:after { } And ofcourse, this doesn't: .some-class:hover:after:hover { } What I am trying to do is- there is a div. If you hover on that div, I am attaching a delete icon using :after on the div. I want to style this icon (say, have it zoom to 1.1 or

问题 This question already has answers here : Closed 7 years ago . Possible Duplicate: Manipulating CSS :before and :after pseudo-elements using jQuery I would like to the jQuery equivalent this CSS code: p:before { content: 'Intro!'; } I've naively tried $('p:before').css('content', 'Intro!'); but it doesn't work. How can I do pseudo-element CSS modifications using jQuery? 回答1: You can't. 1) The selector, p:before , is not just a selector -- the psuedo element defines functionality that does not

问题 I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance. Here is a link to my example: http://jsbin.com/yosevagaqa/1/edit?html,css,output If you resize the window so that the text is forces into a new line, you can see the problem. How can I avoid this? 回答1: As you can see from the other answers, there are multiple solutions! If the size of the square in :before is always

问题 I am making drop-caps for the first letter of a paragraph using transform: scale on the pseudo element :first-letter . It works great in Chrome but not in Firefox, although transform: scale and :first-letter both work in Firefox for themselves. HTML <p>Lorem ipsum dolar sit amet</p> CSS p:first-letter { float: left; margin-left: -36px; margin-top: 10px; font-size: 53px; transform: scale(1,2); -ms-transform: scale(1,2); -webkit-transform: scale(1,2); -moz-transform: scale(1,2); } Here is a

问题 I have the following fiddle set up with a sample on how to style a select box with CSS3. I'm having trouble in IE9. The label:before and label:after pseudo-elements are preventing the 'click' action of the drop down arrow that they are positioned over. This works in fine in every single browser except IE9. Does anyone have any idea how to tweak this to work? I'm all ears! http://jsfiddle.net/CXJTv/ P.S. I'm only interested in css ideas. I do not want JavaScript to be a requirement to get this

问题 http://jsfiddle.net/nicktheandroid/k93ZK/2/ This should be really simple, I just don't understand why it's not working. When hovering over the :before it should change it's opacity to 1, but it doesn't. Why? p { padding-top:15px; position:relative; } p:before { display:block; width:55px; height:55px; content: 'hello'; background:#fff; padding:5px 10px; position:absolute; right:0; opacity:.5; -webkit-transition: all 0.3s ease-in-out; } p:before:hover { opacity:1; bakcground:#000; } EDIT: I'm

问题 As far as I can tell you can't use :before or :after with text content on an image element? Is this correct? Am I missing something? http://jsfiddle.net/rcztz/ I know semantically this isn't correct, I'm using because I'm appending the src to the image using js, but if there's no src I'd like to display alternative content (I could use another div, but it would be nice to just use :after or :before) 回答1: This is correct. You are not able to use pseudo elements on images 回答2: As lnrbob says,

问题 Before moving to my question, I know how the :before and :after selectors work. (not a duplicate of what is ::before or ::after expression). My question is in regards to use. I've seen some inconsistencies over the years where these selectors have been used to display the same thing. Same results, different approach. In some specific cases, such as adding a font awesome icon within an li before the a the :before selector makes sense. I'm not inquiring about that use, since it's intuitive

问题 This question already has answers here : Can I use a :before or :after pseudo-element on an input field? (20 answers) Closed last year . I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have: input[type=checkbox]::after { content: url(images/unchecked_after.gif); position:relative; left:15px; z-index:100; }