Create a beautiful horizontal line with CSS only

Question

There is a tutorial here on how to do this in photoshop:

I am trying t

Answer 1

Please have a look at https://codepen.io/ibrahimjabbari/pen/ozinB. This website provide 18 styles of horizontal lines. Some seem awesome.

Following is an example.

hr.style17 {
    border-top: 1px solid #8c8b8b;
    text-align: center;
}
hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}