How to put <hr> using css after every </ul>...?

Hi

How can I show a horizontal rule <hr> after every <ul>? I have placed a loop on very <ul> and I want to put a separation line using css at the end of every ul.

I have a guess it will be something like

.classname ul:after {
content:...
}

The problem is the right command to put inside content: " here "; as I had used before \A for new line.

Please help

Thanks in advance

 

If you want a HR, the tag meaning a change in subject when a numbered heading is inappropriate, it belongs in the markup, not the CSS.

Sounds more like you just want to draw a line across the bottom of the page. That is NOT what HR means or is for -- so that's either border-bottom's job, or set a border and background on your :after element with an empty content. (setting font-size to 0 to avoid IE's element minimum height bug)

It sounds like you are thinking presentational non-semantic markup -- I'd have to see the page in question to weigh in more.

 

Actually I am working on local wamp server. Below are few more details.

I have a webpage. On left side, there is a sidebar where categories will appear. All categories have thier child categories as well. They are coming up in an ul way.

<ul>
<li>Main Category 1</li>
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
</ul>
<li>Main Category 2</li>
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
</ul>
<li>Main Category 3</li>
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
</ul>
</ul>

So now, I want the when a Main category ends, I want to print an <hr>. So will look like below in browser.

Main Category 1
- Sub Category 1
- Sub Category 2
- Sub Category 3
------------------------------
Main Category 2
- Sub Category 1
- Sub Category 2
- Sub Category 3
------------------------------
Main Category 3
- Sub Category 1
- Sub Category 2
- Sub Category 3
------------------------------

I hope this gives more better idea what I am looking for.

Looking forward for solution.

Thank you.

 

CSS for that is simple... THOUGH, your markup is gibberish. UL cannot be a sibling of LI, it has to go INSIDE it. The ONLY tag that can be a direct child of a UL is LI.

<ul id="categories"> 
	<li>
		Main Category 1
		<ul> 
			<li>Sub Category 1</li>
			<li>Sub Category 2</li>
			<li>Sub Category 3</li>
		</ul>
	</li><li>
		Main Category 2
		<ul> 
			<li>Sub Category 1</li>
			<li>Sub Category 2</li>
			<li>Sub Category 3</li>
		</ul>
	</li><li>
		Main Category 3
		<ul> 
			<li>Sub Category 1</li>
			<li>Sub Category 2</li>
			<li>Sub Category 3</li>
		</ul>
	</li>
</ul>

Code (markup):

With CSS something like this:

#categories,
#categories li,
#categories ul {
	list-style:none;
	padding:0;
	margin:0;
}

#categories {
	font-weight:bold;
}

#categories ul {
	padding:0 0 1em 2em;
	margin-bottom:1em;
	border-bottom:2px solid #000;
	font-weight:normal;
}

Code (markup):

That's off the cuff/untested, but should give you a general idea what I mean.