persistent header of text (CSS) in a div

Question

I have a div called "appHeader"... and the content of it is subject to change dynamically.

I'd like some static text at the top of that div that is highlighted ... and have this done in css.

The text is going to say something like "Property of such and such... etc" but it is static.

Can you create static content within CSS?

Is this possible?

TIA, Kirby

p.s. I can only edit my apps CSS. :-p

Answer 1

Well you can always use the content property.

So something like

.appHeader:before {
  content: "My static text that will appear";
}

Though it is generally not advisable. (I'm not sure which browsers support it edit: The content property is supported in all major browsers. It is an accessibility bad practice).

Answer 2

You can insert some content with CSS, like this:

#header.after {
    content: "Text after";
}

But it's terrible. This is a big hack.

Answer 3

Another option, besides a #header.after solution, would be to make an image containing the text you want and use it in the background-image property.