How to add line between text in html

I've been looking around for some solutions for this simple decoration and I've found quite a few ones, some weird, some even with JS to calculate the height of the font and bla,bla,bla, then I've read the one on this post and read a comment from thirtydot speaking about fieldset and legend and I thought that was it.

I'm overriding those 2 elements styles, I guess you could copy the W3C standards for them and include it on your .middle-line-text class (or whatever you want to call it) but this is what I did:

    
Your text goes here

Here's the fiddle: http://jsfiddle.net/legnaleama/3t7wjpa2/

I've played with the border styles and it also works in Android ;) (Tested on kitkat 4.XX)

EDIT:

Following Bekerov Artur's idea which is a nice option too, I've changed the .png base64 image to create the stroke with an .SVG so you can render in any resolution and also change the colour of the element without any other software involved :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

In HTML, we can easily add the Horizontal line in the document using the following different ways:

1. Using Html tag
2. Using the Internal CSS

Using Html

If we want to add the Horizontal line in the Html document using Html tag, then we have to follow the steps which are given below. Using these steps, we can easily add the line:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.

Step 2: Now, place the cursor at the point where we want to add the line in the Html document. And, then we have to use the

---

tag of Html at that point.

Step 3: Now, we have to add the attributes of

---

tag, which define the size, color and width of a line. So, we have to type the size, width, and color attribute within the

---

tag.

Step 4: And, then we have to specify the values of these attributes.

Step 5: And, at last, we have to save the Html code and then run the file in the browser.

Test it Now

The output of above Html code is shown in the following screenshot:

Using the Internal CSS

If we want to add the Horizontal line in the Html document using the Internal Stylesheet then we have to follow the steps which are given below. Using these steps, we can easily add the line:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.

Step 2: Now, we have to place the cursor just after the closing of title tag in the head tag of the Html document and then define the styles inside the