282

I'm relatively new to CSS, and have used it to change the style and formatting of text.

I would now like to use it to insert text as shown below:

<span class="OwnerJoe">reconcile all entries</span>

Which I hope I could get to show as:

Joe's Task: reconcile all entries

That is, simply by virtue of being of class "Owner Joe", I want the text Joe's Task: to be displayed.

I could do it with code like:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

But that seems awfully redundant to both specify the class and the text.

Is it possible to do what I'm looking for?

EDIT One idea is to try to set it up as a ListItem <li> where the "bullet" is the text "Joe's Task". I see examples of how to set various bullet-styles and even images for bullets. Is it possible to use a small block of text for the list-bullet?

Improve this question
4
  • 1
    the <li> idea isn't good practice. If you really want to this, look into a templating language instead. Commented Apr 29, 2010 at 23:16
  • 1
    Sounds like using the CSS3 :before or :after pseudo-elements you'll really just be moving the redundancy to CSS land (because you'll need to add a CSS statement for OwnerJoe, OwnerJane, etc.) Commented Apr 29, 2010 at 23:25
  • 3
    @Matt Beckman: That is fine with me. I can easily define CSS blocks for each of my users. Repeating it over and over in the HTML seems excessive in my case. Commented Apr 29, 2010 at 23:33
  • 1
    I feel like a more practical use of this for wider audience would be like label.required:before {content: "* ";} to add an asterisk in front of required fields, perhaps. Commented Jun 13, 2013 at 16:16

5 Answers 5

Reset to default
430

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: "));
});
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

To cover older IE, you can conditionally include code.google.com/p/ie7-js which will allow your CSS to remain the same for all browsers. It's an alternative to jQuery that is closer to standards.
Why would you rather recommend using Javascript?
Interesting: seems to work with one or two colons, e.g. .OwnerJoe:before and .OwnerJoe::before
The solution given has a big disadvantage: Inserted text cannot be searched for (usually by CTRL-F) in IE and FF (I did not test chrome, edge etc.).
Concerning the disadvantage concerning searching and selecting: link to stackoverflow
|
51

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
Improve this answer

2 Comments

An interesting side effect to using css content as opposed to jQuery is that the text supplied by the content attribute is not selectable, which may or may not be desirable....
If the text is part of the page layout and not part of the content, maybe the CSS is the right place for it. For example if you wanted your page heading across all pages to be the words "Hello World" in purple on a lime green background, it would make sense. All it would take to change your page heading is to edit a single CSS file. If you had the text in HTML it would take an edit to every single page on your site and perhaps changes to your webapps too.
41

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);
}
Improve this answer

1 Comment

That's a way better idea - I hate the idea of creating a css class to display content. It could end up generating css dynamically base on an sql query. I would replace the selector by div[data-employeename]:before.
15

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:";
    }
Improve this answer

Comments

8

Just code it like this:

    .OwnerJoe {
      //other things here
      &:before{
        content: "Joe's Task: ";
      }
    }
Improve this answer

1 Comment

This is not valid CSS, but Sass syntax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.