How to line-break from css, without using ?

Question

output:

hello
How are you

code:

hello 
 How are you 

Ho

Answer 1

For a List of Links

The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.

Here's an example, assuming a table of contents:

    Item A1 Item A2
    Item B1 Item B2

And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.

    Item A1
 Item A2

    Item B1
 Item B2

Note the advantages of the above solutions:

• No matter the whitespace in the HTML, the output is the same (vs. pre)
• No extra padding is added to the elements (see NickG's display:block comments)
• You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
• No float or clear styles affecting surrounding content
• The style is separate from the content (vs.
, or pre with hard-coded breaks)
• This can also work for loose links using a.toc:after and
• You can add multiple breaks and even prefix/suffix text