CSS force new line

Question

I have something like this:

<li>Post by <a>Author</a></li>

And I want to display the link in a new line, like this

Post by
Author

How can I achieve this? Clear:left doesn't work.

Answer 1

Use the display property

a{
    display: block;
}

This will make the link to display in new line

If you want to remove list styling, use

li{
    list-style: none;
}

Answer 2

Use <br /> OR <br> -

<li>Post by<br /><a>Author</a></li>

OR

<li>Post by<br><a>Author</a></li>

or

make the a element display:block;

<li>Post by <a style="display:block;">Author</a></li>

Try

Answer 3

How about with a :before pseudoelement:

a:before {
  content: '\a';
  white-space: pre;
}

Answer 4

or you can use:

a {
    display: inline-block;
  }