can you have a new line without a <br>

[J64sqs]

Say you have a list of links to articles and to biographies of the authors of those articles. Something like...

<ul>
<li><a href="/article1.htm">Article 1</a> by <a href="/author1.htm">Author 1</a></li>
<li><a href="/article2.htm">Article 2</a> by <a href="/author2.htm">Author 2</a></li>
</ul>

Is there a way through CSS to make "by Author" appear on a new line right under "Article"? Or would I have to go into the html and put a <br> before every "by"?

[createErrorMsg]

j64sqs, the answer to your question is a qualified yes.

There is a CSS way to do what you want, but it isn't very well supported cross-browser. Be aware that only the most compliant of browsers (FF and perhaps Opera) are going to implement it.

What you need is the pseudoclass :after (there's also it's sibling, :before) that can insert content into the code at a selector location. Using this pseudoclass, you can apply it to the <a>nchor tags in your list and use it to insert a line break...

ul a:after {
content: "\A";
white-space: pre;
}

The content property inserts a quoted string. In this case, we've got a backslashed capital A, which is string-speak for a line break. The white-space:pre is needed to force the element to apply the line break.

Again, you might want to look into exactly which browsers support the pseudoclass before deciding to use it. I can only say for certain that it works in FF and doesn't work in IE.

cEM

[jetboy_70]

J64sqs, I'd be tempted to hijack a definition list to achieve the result you're after:

<dl>
<dt><a href="/article1.htm">Article 1</a></dt>
<dd>by <a href="/author1.htm">Author 1</a></dd>
<dt><a href="/article2.htm">Article 2</a></dt>
<dd>by <a href="/author2.htm">Author 2</a></dd>
</dl>