Adding text via css to dt

Question

I would like to make a very dense dl-layout. The dt is in the same line with the dd's that follow. So some extra highlighting is needed to separate the dt from the dd. In traditional written documents this is done via an mdash or a colon.

Is it possible to specify this via CSS, or do I have to rewrite the data according to the style I chose?

(There is a similar issue with h1,h2 ... - headers. If the header is realized only by bolding the text in the same line where the paragraph starts, a period should be inserted after the header text. In LaTex there is an extra command for this, but again, I wonder if CSS could do that.)

(I am aware of this question, only not sure if this applies here too.)

Edit: I realize that it works as follows for colons, but not for mdashes

.myclass dt:after { content: ":"}

Answer 1

You can do this by entering the em dash character as such, provided that your character encoding allows that and you know how to type it. You can use e.g. windows-1252 or utf-8. But then you need to declare the encoding properly, see http://www.w3.org/International/tutorials/tutorial-char-enc/

To avoid the encoding issue, and to be able to write the document using just Ascii characters, you can use the “backslash escape” in CSS, e.g.

dt:after { content: "\2014"; }

(If you want to have the text “— ”, i.e. em dash and space, you need to type two spaces: "\2014 ". This oddity is caused by the convention that a backslash escape consumes a space after it.)

By CSS rules, — has no special meaning: it’s just seven data characters. Even if you have it inside a style element in an HTML document, things don’t change by the old HTML rules: in parsing HTML, a style element is treated as plain text where no markup is recognized, all characters are taken as such and passed to CSS interpretation, except of course the end tag </style>, which needs to be recognized.

In principle, XHTML changes this, and in genuine XHTML (server using an XHTML content type), on supporting browsers (e.g., not IE 8), you can use content: "—" in a style element (because the content of that element is parsed so that entity references are recognized). This is however not a good idea, since there is the alternative described above.

Finally, you can use the Ascii hyphen-minus “-” as a replacement for a dash, but it’s a really poor replacement, short and designed in intra-word use, not for use as punctuation.

Answer 2

Does this fiddle help you in any way? Doing it purely in CSS would ignore some browsers to my knowledge (IE7, possibly IE8).

Answer 3

If I understood correctly, then the question you linked answers your question perfectly:

dt:after {
  content:': '; /* or content:' – ';
}

For headers:

h1, h2, h3, h4, h5, h6 {
  font-weight:bold;
  display:inline;
}
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
  content:'. ';
}