How to Add a Line Before and After a Text in HTML?

Photo of author

How to add a line in HTML? We all have encountered HTML once in our life, starting from the very basic definition: HTML stands for Hypertext Markup Language, a language for creating your web pages which include a series of elements and even more steps along with tags and attributes for creating a perfect page. Sometimes these same steps can be confusing, and if one wrong tag is, your work could be better, leading you to start all over again. 

add lines in html

But don’t worry, here we are to save you and your time with these steps starting with the HR or Horizontal Rule tag. One uses the horizontal rule tag to divide or break the text, highlight the critical words or paragraphs, and sometimes make the page layout more presentable. The horizontal rule tag is empty, meaning one does not need to end the tag and only needs to add <hr> tag to your HTML page.

In this article, you will learn how to add line in HTML.

See Also: Top 7 Hands-On HTML CSS Projects For Beginners To Practice

Add Lines before and after a text in HTML

Let’s see How one can add Horizontal Lines before and after a text in HTML, along with examples. Here we have 2 ways to use the horizontal rule tag: one is using the <hr> tag, and the second is using CSS properties. 

  • We will first see the use of the simple <hr> tag. 

Example of <hr> tag before the text

Through this, you can add line in HTML before the text:

before text

<html>

<head>

    <title>Horizontal line</title>

</head>

    <body>

<p>HORIZONTAL LINE BEFORE TEXT</p>

      <hr>

<p>This is an example of a horizontal line before text.</p>  

        </body>         

</html>

Example of <hr> tag after the text

Through this, you can add a line in HTML after the text:

after text

<html>

<head>

    <title>Horizontal line</title>

</head>

    <body>

<p>HORIZONTAL LINE AFTER TEXT</p>

<p>This is an example of a horizontal line after text.</p>

      <hr>

        </body>         

</html>

<Hr> tag

  • From the above examples, we saw how we used the <hr> tag separately before and after the text in HTML. Lets us now look at the use of the <hr> tag before and after the text together with an example. 

Example of <hr> tag

Through this, you can add line in HTML tag:

horizontal line

<html>

<head>

    <title>Horizontal line</title>

</head>

    <body>

<p>HORIZONTAL LINE</p>

    <hr>

<p>This is an example of a horizontal rule tag before and after text together.</p>

      <hr>

        </body>         

</html>

Attributes

  • Here we will use various attributes of the <hr> tag and see how it turns out. Although the attributes are only supported in HTML4 and not in HTML5, we still will see the use of these attributes through examples and how they style our lines before and after the text.
  • Under these examples, we will see the use of attributes like Width, which specify the Width of the line, and Size specifying the height. Align, which helps align the line to center/left/right, and Color through this one can set the Color of the horizontal line. Using them according to your choice or wish will style the makeup page accordingly.   

Example of <hr> tag with its attributes

Through this, you can add a line in HTML with its attributes:

alt atributes

<html>

<head>

    <title>Horizontal line</title>

</head>

    <body>

<p>HORIZONTAL LINE</p>

    <hr width=”500px”

        size= “10”

        color= “green”

        align= “left”>

<p>This is an example of a horizontal rule tag used before and after text using various attributes.</p>

      <hr width=” 90%”

          color= “green”>

        </body>         

</html>

CSS Properties

  • We will now see the use of the <hr> tag by using the CSS properties. Many of you will question while reading this article: What are these CSS properties? Well, nothing to worry about. CSS is Cascading Style Sheet. This is a style sheet language that helps one to style the makeup page layout. For example, in the <hr> tag, one can style the border type, align, Color, and Width, and choose the background color.   

Example of <hr> tag with the use of CSS properties

Through this, you can add a line in HTML with CSS properties:

css properties

<html>

<head>

    <title>Horizontal line</title>

</head>

    <body>

<p>HORIZONTAL LINE</p>

    <style>

     /*dashed green border*/

     hr. one {

        border-top: 2px dashed #007810;

      }

    </style>

   </head>

   <body> 

<p>This is an example of a horizontal rule tag using CSS properties.</p>

      <hr width=” 90%”

          color= “green”>

<p>This is an example of a horizontal rule tag using CSS properties.</p>

<hr class=”one”>

        </body>         

</html>

Conclusion 

Using HTML and its tags and attributes can be difficult, but we made sure in the above article that the process is smooth and easy for you with your subsequent HTML web page work. Sometimes the straightforward steps can skip from our minds, and we struggle to recall them, or in the end, we give up on the task instead of a simple try, so here we are to help you with your problems and give you the best solutions.  

Therefore I hope you must have known now how to add a line in HTML.

See Also: Best Tools For Beautifying Or Unminifying HTML, CSS, JS, XML, And JSON

Leave a Comment