Append horizontal rule to each <li>
jQuery Solution
Just realized that you wanted to nest the hr
element inside the li
before you close it, yes it's perfectly valid, so simply use append()
, and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr
element as a direct child to ul
element is not a valid markup, instead, you can use a border-bottom
for each li
which will behave same as hr
does, still if you want an explicit way to do so, say for controlling the width
of the separator without changing the width
of li
than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block
level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div
. You can also use border
on this but to keep the thin line horizontally centered, I've assigned height: 1px;
and than am using margin
to space up.
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul
and li
then you use li
instead of <hr/>
or simply <hr/>
inside a <li></li>
tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I think it's better to use CSS for this. for example you can stop using <hr>
tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }