css-content

Getting pseudo-element content in Chrome

由 瘦欲@ 提交于 2019-12-09 01:31:44
问题 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

Input placeholder using CSS only

由 醉酒当歌 提交于 2019-12-08 23:32:27
问题 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

CSS :before superscript “6”? [duplicate]

由 我怕爱的太早我们不能终老 提交于 2019-12-08 03:22:04
问题 This question already has answers here : Superscript in CSS only? (14 answers) Closed 5 years ago . Is there a way to add a superscript "6" into the "content" CSS property for a pseudo element? I've been all over the web, trying different Unicode strings and glyph codes to try to get this to work, but haven't found a solution. Thanks! EDIT: Sorry for not clarifying... I'm needing to put the superscript "6" amongst other text in the same "content" property. Looks like I'll need to just define

Can CSS Content Property work in IE7?

由 蓝咒 提交于 2019-12-08 00:51:46
问题 I came across with CSS content property, which it is able to add text into element. for example: .class:after{ content: "testing"; } Unfortunately this CSS property only working in IE8 only with !DOCTYPE is defined. Is there anyway or workaround that we can make this to be working in IE7 too? without using JavaScript or jQuery. 回答1: Nope, IE7 does not support it Only chance is to use Javascript/Jquery. 回答2: I'm using this solution, which doesn't require js. .whatever { *zoom: expression( this

css counter not working in internet explorer for hidden content - how to fix?

由 白昼怎懂夜的黑 提交于 2019-12-06 08:31:39
问题 We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you: ol.instructions {counter-reset:instructions-section;} ol.instructions > li:before { content:counter(instructions-section); counter-increment:instructions-section; } The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others. It

Is it somehow possible to style an iframes before/after pseudo-element?

由 百般思念 提交于 2019-12-05 10:46:27
问题 As the title says, is there a way to style an iframes pseudo before / after ? Without wrapping the iframe with another div , or else?` I tried to style it like any other element, but no success: iframe::before { content: 'foo'; position: absolute; top: 0; left: 0; } iframe::after { content: 'bar'; position: absolute; top: 0; right: 0; } http://fiddle.jshell.net/ppRqm/ Update A known workaround is to add the before/after to an element in the source file: http://fiddle.jshell.net/ppRqm/2/ But

content property in CSS

由 馋奶兔 提交于 2019-12-05 08:07:42
In some template I see that an arrow that created with CSS. something like this: div:after{ content:"\f107"; } this code display an arrow like this : what is this code? where I can find more codes? Mr. Alien Using content property embeds a virtual content inside an element, it is used with a pseudo :before or :after , so if you use :before , the content will be embedded before. From MDN : The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements . Content property

Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?

由 青春壹個敷衍的年華 提交于 2019-12-04 18:23:28
问题 HTML: <p>Hover</p> CSS: p::after { content: " here"; transition: all 1s; } p:hover::after { font-size: 200%; color: red; } Live demo: http://jsfiddle.net/SPHzj/13/ (works in Firefox and Chrome) As you can see, I've set up CSS transitions on the ::after pseudo-element of the paragraph. Then, when the paragraph is hovered, two new styles apply for the pseudo-element which are transitioned. This works in Firefox and Chrome, but not in IE10. My reasoning was that IE doesn't understand the p:hover

Is it possible to select css generated content? [duplicate]

由 帅比萌擦擦* 提交于 2019-12-04 15:08:11
问题 This question already has answers here : How can I make generated content selectable? (2 answers) Closed 4 years ago . Let's say I have mark up: <div data-generated="world!">Hello </div> ..with CSS: div:after { content: attr(data-generated); } This produces the text: Hello world! - FIDDLE div:after { content: attr(data-generated); } <div data-generated="world!">Hello </div> BUT... If I try to select / Copy the text - only the 'hello ' part is selectable. Is there any way to select css

css counter not working in internet explorer for hidden content - how to fix?

由 爱⌒轻易说出口 提交于 2019-12-04 12:11:31
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you: ol.instructions {counter-reset:instructions-section;} ol.instructions > li:before { content:counter(instructions-section); counter-increment:instructions-section; } The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others. It worked like a treat and we were sitting there with smiling faces until someone thought of testing it
订阅 css-content