1

I have the following CSS:

header h1:after {
    content:"Alumni Association";
}

and I want it to display as follows:

Alumni

Association

I have tried \a, \n, <br> etc but none of them work.

I am looking for a purely CSS solution as that is all I have access to...

Alex
  • 3,730
  • 9
  • 43
  • 94
  • This is just a matter of finding the right way to include a line-break into css content. Thus marked as duplicate. – klaar Aug 10 '15 at 12:49

5 Answers5

7

You need to add white-space: pre; to your class.

h1:after {
    content: 'Hello\AWorld';
    white-space:pre;
}
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
1

You should add white-space:pre; to the styling, and then include \A in the text:

header h1:after {
    white-space:pre;
    content:"Alumni \a Association";
}

JSFiddle

leigero
  • 3,233
  • 12
  • 42
  • 63
1

Try: DEMO

header h1:after {
    content:"Alumni \A Association"; 
  white-space: pre; /* or pre-wrap */    

}

For reference: Link

The 'display' property controls whether the content is placed in a block or inline box.

The following rule causes the string "Chapter: " to be generated before each H1 element:

H1:before { content: "Chapter: "; display: inline; }

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

h1:before { display: block; text-align: center; white-space: pre; content: "chapter\A hoofdstuk\A chapitre" }

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

G.L.P
  • 7,119
  • 5
  • 25
  • 41
1
header h1:after {
    content:"Alumni \A Association";
    white-space: pre;
}
Deepak
  • 141
  • 1
  • 2
0
header h1:after {
    content:"Alumni \A Association";
    white-space: pre;
}
Steevan
  • 826
  • 5
  • 8