How to put horizontal rule to the right of text

Discussion in 'Web Design and Development' started by celticpride678, Apr 11, 2010.

  1. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #1
    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:

    Code:
    <p class="splitter">
    All Posts<hr>
    </p>
    Here is the CSS Class:

    Code:
    .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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. celticpride678 thread starter Guest

    celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #3
    Is there another effect to get what I want?...I can't really think of any right now.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Here's an example modification that can give that look for the most part.

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

Share This Page