Here (link removed) I'm trying to replace the text in an anchor with an image, using the CSS content property. I'm guessing that it's irregular behaviour for Chrome to do what I want it to do, by replacing the text with the image I provide in the CSS code?
Here's the code I use:
<!-- HTML -->
PEGI Rating
<!-- CSS -->
.pegi18 {
content: url("http://example.com/path/path/path/18.png");
width: 50px;
height: 61px;
}
Here's the end result in MSIE 11 and Chrome 32
Why won't the images show in MSIE? I've also done tests on modern.ie.
The reason why this isn't working is because css content is meant for pseduo-elements like :after and :before
I agree with GCYrillus, I too think it is bad practice and may not work in all browsers (as your post suggests). If you want to control the picture based on a class try adding a background picture instead of the content property.
.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}
According to MDN,
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element.
In your case, this doesn't apply, so it really shouldn't work in any browser (Chrome appears to allow it, even though it doesn't meet the specs)
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/content
According to the CSS specification:
Applies to: :before and :after pseudo-elements
It looks like Chrome is going against the specification by allowing this property directly on an element instead of a :before or :after pseudo-element. For compatibility with other browsers, I'd recommend trying an alternative method such as using the <img> element or the background-image CSS property.
Related
Consider this html:
<div class="logo-b"></div>
And this CSS:
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
I am trying to display an image using CSS. The image is not being displayed. Please see this jsfiddle to see what I mean. What am I missing please?
EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not. If I add :before or :after to the class name in my CSS the image displays in Firefox. Could someone shed some light on why this would be please?
EDIT: I am using the wrong construct to place the image on my page. In the context of what I am doing I should use the <img> html tag. The CSS content construct uses :before and/or after to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.
This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C
I think the behavior in Firefox is correct.
I was wondering how to display my CSS content in FireFox. It doesn't seem to be displaying correctly. Here is the code:
div.images:hover {
content:url(http://domain.com/images.png);
}
Why does the content hover not display right on modzilla?
The content property is meant for the :before/:after pseudo elements. Therefore it isn't suppose to work on something like div.images:hover.
Instead, use the background property to add the styling:
div.images:hover {
background-image: url(http://domain.com/images.png);
}
My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link.
For example the following css shows the url afterward:
a:after {
content: " (" attr(href) ")";
}
...but it will not be clickable.
Anyone get around this without changing underlying HTML?
Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)
It looks like you have discovered a bug in the browser you are using.
Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.
The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.
I've had the same problem and apparently if I set
a { vertical-align: middle; }
(thus on the link itself, not the pseudo element), it works.
I'm hoping someone has a better solution than this, but just in case not, I did come up with this horrible/crappy/hacky solution:
a {
margin-right: 40px;
}
a:after {
content: " (" attr(href) ")";
margin-left: -40px;
}
Just add this to your css:
a {padding-right:Ypx} /* Y = size of your url in pixels */
If the size of the URL varies you will have to use javascript to get it.
If you have a link on Wrapper then you can make pseudo-elements clickable by setting pointer-events to none.
a:after {
pointer-events: none;
}
To avoid modifying the document tree, you could use a JavaScript click handler for a:after.
Edit: This doesn't work, because pseudo elements aren't added to the DOM.
The :before and :after add content before and after the selector. In CSS, there's no selector that let's you get and edit the content inside a tag. The only way to make that happen would be with jQuery or javascript to actually edit the HTML.
I wrapped the link and the text separately -- the :before goes on the container and the link goes inside. This way I can use the :before as a jQuery tigger and the text as a link.
HTML:
<li class="before-here">My Link Text</li>
CSS:
li.before-here:before{ //some css like an image }
Jquery:
$("li.before-here").click(function(){ //do something});
I'm using this to create a hide/show toggle in a tree -- this gives me the button I need on the left and allows me to link to the parent.