How to put horizontal rule to the right of text

[celticpride678]

I'm trying to embed a horizontal rule directly to the right of text, but it puts it on the next line for some reason. Here is my code:

<p class="splitter">
All Posts<hr>
</p>

Here is the CSS Class:

.splitter {
   color: #888;
   padding-left: 1px;
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
}

The site is http://www.itsalltech.com.

Any ideas? Thanks.

 

[angelwatt]

hr tags are block elements so it's behaving normally, but you probably should find another to get the effect you want. The hr tag is pretty useless and unnecessary. It may even be deprecated.

 

[celticpride678]

hr tags are block elements so it's behaving normally, but you probably should find another to get the effect you want. The hr tag is pretty useless and unnecessary. It may even be deprecated.

Is there another effect to get what I want?...I can't really think of any right now.

 

[angelwatt]

Here's an example modification that can give that look for the most part.

#primary-content .blocks {
	margin-top: 1em;
	border-top: 1px solid #000;
	...
}
.splitter {
	display: inline;
	position: relative;
	top: -23px;
	background: #eee;
	...
}