[html] horizontal line and right way to code it in html, css

I need to draw a horizontal line after some block, and I have three ways to do it:

1) Define a class h_line and add css features to it, like

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Use hr tag

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) use it like a after pseudoclass

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

Which way is the most practical?

I'd go for semantic markup, use an <hr/>.

Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.

If you really want a thematic break, by all means use the <hr> tag.

If you just want a design line, you could use something like the css class

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

and use it like

<div class="block_1 hline-bottom">Cheese</div>

In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the <hr> tag represents a horizontal rule.

http://www.w3schools.com/tags/tag_hr.asp

So after definition, I would prefer <hr>

I wanted a long dash like line, so I used this.

.dash{_x000D_
        border: 1px solid red;_x000D_
        width: 120px;_x000D_
        height: 0px;_x000D_
_x000D_
}

<div class="dash"></div>

My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

it is depends on requirement , but many developers suggestions is to make your code as simple as possible . so, go with simple "hr" tag and CSS code for that.

This is relatively simple example and worked for me.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html