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



.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find [: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

Here's the fiddle: //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.

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 tag as shown in the following block. And, then we have to type the hr CSS tag for styling the horizontal line.

Step 3: Now, we have to define the attributes of hr CSS tag. So, we will define the different attributes in the following block:

Step 4: Now, we have to type the tag in the body of the Html document to show the horizontal line on the web page. And, at last, we have to save the Html file and then run the file in the Internet browser.

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

How do you put a line between words in HTML?

How do I add a horizontal line between text in HTML?

How do you add a line in HTML?

How do you put a vertical line between text in HTML?