Advanced Search

Fancy Horizontal Lines (Pure CSS)

/ Published in: CSS
Save to your folder(s)
Full Credit to Kit McAllister. A pretty nice solution.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. hr {
  2.     margin-top: 20px;
  3.     border-top: 2px solid #444;
  4. }
  5.  
  6. hr:before {
  7.     display: block;
  8.     position: relative;
  9.     text-align: center;
  10.     width: .8em;
  11.     left: 50%;
  12.     margin: -14px 0 0 -20px;
  13.     content: "\272F";
  14.     font-size: 150%;
  15.     padding: 0 5px;
  16.     background: white;
  17.  }

URL: http://kitmacallister.com/2011/02/08/fancy-horizontal-rules/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.