Log in / Register

Forum › How do I...?

Line-break in content insertion

Bram
I add a chapter number to each chapter title in the following way:
<html>
<head>

<style>
h1 { counter-increment: chapter-num }

h1::before {
    content: "Chapter " counter(chapter-num) ": "
}
</style>

</head>
<body>
	
<h1>This is the title of a chapter</h1>

<p>Content comes here...</p>
</body>
</html>

Yet I would like to have "Chapter 1:" on a separate line, above the title, as in the attached example. How do I insert a line-break in the 'content' statement?
  1. chapter-titling.png‎ 39.1 kB
mikeday
You can use a \A escape to encode a newline character in the string, and specify white-space: pre-line.

But a better method might be to apply display: block to the ::before pseudo-element.
Bram
Many thanks! That did it.