css-content

Why don't :before and :after pseudo elements work with `img` elements? [duplicate]

由 倖福魔咒の 提交于 2019-11-26 04:53:21
This question already has an answer here: Does :before not work on img elements? 9 answers CSS :after not adding content to certain elements 3 answers I am trying to use a :before pseudo element with an img element. Consider this HTML and CSS... HTML <img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" /> CSS img:before { content: "hello"; } jsFiddle . This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a div or span element. Why not? Is there a way to make pseudo elements work with img elements? alex The spec says ... Note. This

CSS content property: is it possible to insert HTML instead of Text?

由 徘徊边缘 提交于 2019-11-26 02:08:30
问题 Just wondering if it\'s possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: \'<a href=\"#top\">Back</a>\'; } this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :) 回答1: Unfortunately, this is not possible. Per the spec: Generated content does not alter the document tree. In particular, it is not fed back to the document language

Why don&#39;t :before and :after pseudo elements work with `img` elements? [duplicate]

由 强颜欢笑 提交于 2019-11-26 01:53:55
问题 This question already has answers here : Does :before not work on img elements? (11 answers) CSS :after not adding content to certain elements (3 answers) Closed 5 years ago . I am trying to use a :before pseudo element with an img element. Consider this HTML and CSS... HTML <img src=\"http://0.gravatar.com/avatar/this-is-not-a-hash\" alt=\"\" /> CSS img:before { content: \"hello\"; } jsFiddle. This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works

Why do the :before and :after pseudo-elements require a &#39;content&#39; property?

由 笑着哭i 提交于 2019-11-25 23:49:58
问题 Given the following scenario, why does the :after selector require a content property to function? .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width: 20px; height: 20px; background: red; display: block; position: absolute; top: 0px; left: 20px; } <div class=\"test\"></div> Notice how you do not see the pseudo element until you specify the content property: .test { width: 20px; height: 20px; background: blue; position:relative; } .test:after { width:

Adding HTML entities using CSS content

由 梦想的初衷 提交于 2019-11-25 22:46:39
问题 How do you use the CSS content property to add HTML entities? Using something like this just prints   to the screen instead of the non-breaking space: .breadcrumbs a:before { content: \' \'; } 回答1: You have to use the escaped unicode : Like .breadcrumbs a:before { content: '\0000a0'; } More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ 回答2: CSS is not HTML.   is a named character reference in HTML; equivalent to the decimal numeric character reference   .

Can I use a :before or :after pseudo-element on an input field?

由 一世执手 提交于 2019-11-25 21:37:49
问题 I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span , it works OK. <style type=\"text/css\"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> This works (puts the smiley after \"buu!\" and before \"some more\") <span class=\"mystyle\">buuu!</span>a some more This does not work - it only colors someValue in red, but there is no smiley. <input class=\"mystyle\" type=\"text\" value=\"someValue\"> What am I
订阅 css-content