Using CSS to insert text

html css

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?

the

idea isn't good practice. If you really want to this, look into a templating language instead.

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.)

@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.

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.

Samuel Liew

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: "));
});

Should be a space after the colon.

Initial tests indicate the content-property works well. Congrats on finding an answer when everyone else says it can't be done. :)

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

YakovL

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

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.

Martin Hansen

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);
}

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.

kohane15

Just code it like this:

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

This is not valid CSS, but Sass syntax.

kohane15

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

Using CSS to insert text

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US