css-content

问题 As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible. I just added the following to my base stylesheet : *:before, *:after { content: ''; } ...so I don't have to declare it anymore further. Apart from the fact the * selector is counter-performant, which I'm aware of (let's say the above is an example and I can find a better way to declare this, such as listing the tags

问题 On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax. a.some-link:before { font-family: icons; display: inline-block; padding-right: 0.3em; content: 'x'; } However, when this link is at the beginning of a line, it's sometimes separated from its icon: I tried adding white-space: nowrap to the CSS rule above but that didn't help. How do I keep the icon and the text together? (CSS 3 is okay) Note: I don't want to format the whole link with white

问题 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 have numbered paragraphs without resorting to using ordered lists. I'm trying to accomplish this by using content:counter(paragraph) in CSS so that every paragraph block I create generates a number to the left of it. .pass { counter-reset:paragraph; } .pass p:before { content:counter(paragraph); position:absolute; font-size:0.6em; color:#999; margin-left:-3em; counter-increment: paragraph; } It works fine, but the problem is I can't figure out how to align the numbers so that they

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

问题 How can I dynamically change the content of a <span> tag in an infinite loop. I have tried using the below method. Is it possible to do this with pure CSS animations? If it is not possible with pure CSS, please suggest an alternate method. HTML: <p>Lorem ipsum <span></span> sit amet.</p> CSS: span { content: ''; animation: flip 2s infinite; } @keyframes flip { 10% { content: 'Example no1'; } 40% { content: ''; } 80% { content: 'Example no2'; } 100% { content: ''; } } Demo Fiddle 回答1: Changing

问题 I have a multi-page form and each page is contained within a list item. Each of those list items contains an ordered list with questions in its list items. Each of those list items contains an unordered list with a selection of either radio or checkbox input types. I'm trying to get CSS counters to increment on the ordered list's list items. Here's a basic example: http://jsfiddle.net/wCbvb/ <ol> <li> <h1>Page 1</h1> <ol> <li> <h2>Question 1</h2> <ul> <li>Answer</li> <li>Answer</li> <li

问题 Do CSS rules exist for placing content such as images or text within elements? eg. say I have a div which can contain some info which is correct and some info which is wrong, can I have rules such as: .correct { img: greenTick.jpg; text: "answer is wrong" } .wrong { img: redX.jpg; text: "answer is correct" } Is it possible to position them too? 回答1: You can use pseudo elements (::before and ::after). Set the text using the content attribute, and the image as the background of the pseudo

问题 I don't have much experience on UI development. I have a class defined in CSS, something like this- .myclass { color: red; content: "my content"; font-size: 12px; padding-right: 2px; } I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code? 回答1: I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably

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