Let\'s say I have this HTML:
Features
- Smells Good
- <
You are not interested in a lot of "solutions" to your problem. I do not think there really is a good way to do what you want to do. Anything you insert using :after
and content
has exactly the same syntactic and semantic validity it would have done if you had just written it in there yourself.
The tools CSS provide work. You should just float the li
s and then clear: left
when you want to start a new line, as you have mentioned:
See an example: http://jsfiddle.net/marcuswhybrow/YMN7U/5/
I accomplished this by creating a ::before selector for the first inline element in the row, and making that selector a block with a top or bottom margin to separate rows a little bit.
.1st_item::before
{
content:"";
display:block;
margin-top: 5px;
}
.1st_item
{
color:orange;
font-weight: bold;
margin-right: 1em;
}
.2nd_item
{
color: blue;
}
Note sure this will work, depending how you render the page. But how about just starting a new unordered list?
i.e.
<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>