SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating horizontal line with small circles on each end

    How would one go about creating a horizontal rule with a small solid circle (10px in diameter) on each end? I've searched online and experimented quite a bit, but haven't been able to figure it out. Thanks in advance for any help.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    There's lots of ways to do that, but you could do it with three elements like this
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    .rule {
      height: 4px;
      background: #000;
    }
    .rule:before, .rule:after {
      content: '';
      height: 10px;
      width: 10px;
      border-radius: 10px;
      float: left;
      background: #000;
      margin-top: -3px;
    }
    .rule:after {
      float: right;
    }
    </style>
    </head>
    <body>
    <div class="rule"></div>
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    There are many ways to do something like that, but here's my quick attempt:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    .line {
    	border-top: 1px solid #30353b;
    	padding-top:5px;
    	padding-bottom: 5px;
    	margin: 40px auto 0;
    	width: 80%;
    	position: relative;
    }
    
    .line:before, .line:after {
    	content: "";
    	width: 10px;
    	height: 10px;
    	background: #30353b;
    	border-radius: 5px;
    	position: absolute;
    	top: -6px;
    }
    
    .line:after {
    	right: 0;
    }
    </style>
    	
    </head>
    <body>
    
    <div class="line"></div>
    
    </body>
    </html>
    Edit:

    Ha ha, Mark is much too quick for me.

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. Thanks for your help.

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, you both were super quick. I really appreciate the help.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ha ha, Mark is much too quick for me.
    Great minds think alike.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •