how to add text instead of image in php code [duplicate]
It is, but requires a CSS2 capable browser (all major browsers, IE8+).
.OwnerJoe:before {
content: "Joe's Task:";
}
But I would rather recommend using Javascript for this. With jQuery:
$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
The answer using jQuery that everyone seems to like has a major flaw, which is it is not scalable (at least as it is written). I think Martin Hansen has the right idea, which is to use HTML5 data-*
attributes. And you can even use the apostrophe correctly:
html:
<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>
css:
div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }
output:
Joe's task - mop kitchen
Charles' task - vacuum hallway
Also check out the attr() function of the CSS content attribute. It outputs a given attribute of the element as a text node. Use it like so:
<div class="Owner Joe" />
div:before {
content: attr(class);
}
Or even with the new HTML5 custom data attributes:
<div data-employeename="Owner Joe" />
div:before {
content: attr(data-employeename);
}
Just code it like this:
.OwnerJoe {
//other things here
&:before{
content: "Joe's Task: ";
}
}
I know this is an old question but I would like to update the answer to CSS3. The question is a pseudo-class or a pseudo-element.
CSS2 way (pseudo-class)
.OwnerJoe:before {
content: "Joe's Task:";
}
CSS3 way (pseudo-element) Note the double colon
.OwnerJoe::before {
content: "Joe's Task:";
}