Create a Beautiful Horizontal Line with CSS Only

Create a beautiful horizontal line with CSS only

I would use a radial-gradient to a pseudo-element instead of a box-shadow since it tapers off towards the edges nicer.

Position the radial-gradient above the <hr> so that it's cut in half. Then position another psuedo-element just below the <hr>with a the same color as the background and height just large enough to cover the rest of the gradient.

Updated JSFiddle

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

How to create a partial-horizontal line in HTML?

In your example this is done with css and not with a hr-tag
So either you can use the css-style border-bottom as in your example, or you indeed can use a hr-tag which you give some CSS, e.g.:

<hr style="width:40%">

If you want to position the hr, you may need the position-style.
You can try this easily on the w3c example site.

Remember, that the hr-width-attribute (not the style!) is not working under html5 anymore.

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

hr.fancy-line:after {
    content:'';
    height: 0.5em;   
    top: -8px;  /*change or bottom:0; */
}

hr.fancy-line {  border: 0;  height: 1px;  position: relative;  margin: 0.5em 0;}hr.fancy-line:before {  top: -0.5em;  height: 1em;}hr.fancy-line:after {  content: '';  height: 0.5em;  top: -8px; /*or bottom:0; */}hr.fancy-line:before,hr.fancy-line:after {  content: '';  position: absolute;  width: 100%;}hr.fancy-line,hr.fancy-line:before {  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);  background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);}body,hr.fancy-line:after {  background: #f4f4f4;}

<hr class="fancy-line"></hr>

.fancy-line {     border: 0;     height: 1px;    position: relative;    margin: 0.5em 0;}.fancy-line:before {    top: -0.5em;    height: 1em;}.fancy-line:after {    height: 0.5em;    top: calc(-0.5em + 1px);        /* adjusted this */}
.fancy-line:before, .fancy-line:after {    content: '';    position: absolute;    width: 100%;}
.fancy-line, .fancy-line:before {    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);}
body, .fancy-line:after {    background: #f4f4f4;}

-Some Text-<div class="fancy-line"></div>

.h1 {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}

.h1:before,
.h1:after {
  content: '';
  width: 100px;
  height: 10px; /* square height - match widths below */
  margin: 0 10px; /* space against text */
  background: linear-gradient( 
    0deg, 
    #fff 0%, #fff 40%, /* top */
    #aaa 40%, #aaa 60%, /* middle - 20% of 10px is 2px */
    #fff 60%, #fff 100% /* bottom */
  );
}

.h1:before {
  border-right: 10px solid darkorange; /* square width - match height above */
}

.h1:after {
  border-left: 10px solid darkorange; /* square width - match height above */
}

<h1 class="h1">Products</h1>

height: .05em;

height: 2px;