Using CSS to insert text

Question

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?

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, Apr 29 '10 at 23:25
@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. — abelenky, Apr 29 '10 at 23:33
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. — Patrick, Jun 13 '13 at 16:16

score 404 · Accepted Answer · edited Mar 17 '22 at 01:42

404

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

edited Mar 17 '22 at 01:42

Samuel Liew

76,741
107
159
260

answered Apr 29 '10 at 23:14

Marcel Jackwerth

53,948
9
74
88

4

Should be a space after the colon. – system PAUSE Apr 29 '10 at 23:17
7

Initial tests indicate the content-property works well. Congrats on finding an answer when everyone else says it can't be done. :) – abelenky Apr 29 '10 at 23:18
8

To cover older IE, you can conditionally include http://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. – system PAUSE Apr 29 '10 at 23:22
23

Why would you rather recommend using Javascript? – Rikki Nov 12 '13 at 15:07
1

Interesting: seems to work with one or two colons, e.g. `.OwnerJoe:before` and `.OwnerJoe::before` – MmmHmm May 29 '17 at 16:47
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.). – Peter Nov 27 '19 at 23:14
Working here 10 years later. – Thanasis Nov 01 '20 at 16:25
Concerning the disadvantage concerning searching and selecting: [link to stackoverflow](https://stackoverflow.com/questions/16851781/how-to-make-text-created-with-css-after-element-selectable) – Peter Nov 23 '20 at 12:49
@Thanasis: Yes, indeed, but as you see on the given link just some minutes ago still existent. – Peter Nov 23 '20 at 12:54
Or does anybody knows a method to overcome the problem? Solutions are very appreciated because I'm using css:before very often with side-effect that users could not copy pages by clipboard. – Peter Nov 23 '20 at 12:58
@MmmHmm The single colon creates a pseudo-class where the dual colon creates a pseudo-element. I talked about this a 5 years after your comment in my answer below. – Joe Johnston May 31 '22 at 12:53

score 47 · Answer 2 · edited Mar 16 '18 at 22:00

47

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

edited Mar 16 '18 at 22:00

YakovL

7,557
12
62
102

answered Apr 23 '13 at 04:25

Jeff

2,095
25
18

21

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.... – Jeff Apr 23 '13 at 04:41
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. – casgage Feb 03 '15 at 20:33

score 38 · Answer 3 · answered Apr 10 '13 at 00:09

38

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

answered Apr 10 '13 at 00:09

Martin Hansen

599
4
11

2

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`. – Johnny5 Jan 08 '14 at 20:17

score 11 · Answer 4 · edited Sep 15 '21 at 12:35

11

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

edited Sep 15 '21 at 12:35

kohane15

809
12
16

answered Aug 24 '21 at 21:58

Joe Johnston

2,794
2
31
54

score 8 · Answer 5 · edited Sep 15 '21 at 22:56

8

Just code it like this:

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

edited Sep 15 '21 at 22:56

kohane15

809
12
16

answered Sep 12 '14 at 11:19

BartSabayton

535
1
5
15

29

This is not valid CSS, but Sass syntax. – Asfand Qazi Mar 17 '16 at 10:45

Using CSS to insert text

5 Answers5

Linked

Related