How to Add Horizontal Lines Before and After a Text in HTML
Published: 2022-02-28 12:58:32

This article will guide you on how to add a horizontal line to the right and left side of a text as shown below:

![HTML text with lines right and left](https://cdn.hashnode.com/res/hashnode/image/upload/v1646051202057/WDEutqqqe.png)

if(busy){ 

[Jump to complete code!](#complete-code)

} else {


## 1. Create an HTML text tag.

In your HTML file create an `h2` tag and give it a class name of `hr-lines`

```
<h2 class="hr-lines">PEACE</h2>
```


## 2. Adding the Left Line
We'll make use of the CSS `:before` pseudo-element to add a line to the left side of the text. Apply the code below to your CSS file:

```
.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}
```

From the above code, we're creating a new element with a height of `2px` and width of `130px` before the `hr-lines` element using the content property, then giving it an absolute position in order to move it around, we set the top to `50%` to make it align with the text at the middle.

![creating a text with left and right lines](https://cdn.hashnode.com/res/hashnode/image/upload/v1646051293933/i7c05KPbw.png)

## 3. Set the `hr-lines` to relative
For the pseudo-elements to be applied to the target element, we must set the position of the element to a relative, this will make all the movement of the `:before` and `:after` be relative to the parent (text).

Add the following lines to your CSS files.

```
.hr-lines{
  position: relative;
}
```
Resulting output

![creating a text with left and right lines](https://cdn.hashnode.com/res/hashnode/image/upload/v1646051386215/qui1AcdZB.png)

We can fix this by setting the `max-width` and adding `margin` to the element.

```
.hr-lines{
  position: relative;
  /*  new lines  */
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}
```

![how to create a text with horizontal lines](https://cdn.hashnode.com/res/hashnode/image/upload/v1646051447514/FnEzjK-Fk.png)

We're setting the `:before` to the left side of the text by setting the `left:0`.

## 4. Adding the Right Line

We'll make use of the `:after` pseudo-element to add the right line.

Add the following lines of code to your CSS file to add the right line to the text.

```
.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}
```

We're setting the `:after` to the right side of the text by setting the `right:0`.

## Final Output:

![HTML text with lines right and left](https://cdn.hashnode.com/res/hashnode/image/upload/v1646051202057/WDEutqqqe.png)

}
<hr >

<h2 id="complete-code"> The Complete Code </h2>

`index.html`
```
<h2 class="hr-lines"> PEACE </h2>

<section>
  <div>
    <p>I wish for peace in Russia & Ukraine</p>
  </div>
<section>
```

`index.css`
```
.hr-lines{
  position: relative;
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

.hr-lines:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

p{
  text-transform: uppercase;
  color: red;
}

section{
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 1rem;

}

div{
  width: 500px;
    border: 1px solid #ccc;
  padding: 10px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
}
```

## Wrapping Up

I hope that this article will assist you in creating a text with horizontal right and left lines at some point in the future.

<hr />

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

-  [Twitter @unclebigbay143](https://twitter.com/intent/follow?screen_name=unclebigbay143) 
-  [LinkedIn @unclebigbay](https://www.linkedin.com/in/unclebigbay/) 

<hr />



See you in the next article. Bye Bye 🙋‍♂️

![unclebigbay's blog](https://cdn.hashnode.com/res/hashnode/image/upload/v1622627809083/3i7ThmW-M.png)