How to make Horizontal Lines with CSS only

In this picture, an example is illustrated of how simple CSS can create the same effect as a HTML Horizontal Line .
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

phone_label:after { content: “\00a0 “; }

I ran into a situation recently where I needed to actually create a border line across a page, as a divider between sections.  

My client was using WPcharitable, a donation plugin, and had asked me to create some custom donation forms, for a Demographics section.

I had to do it on the donations form itself, which I immediately found to be a challenge.  This was no ordinary WordPress plugin, if I wanted to add custom donation forms, I needed to add and edit php code to the functions.php file in my theme.  

I was able to create the forms after some research, but when I was asked to create a separation divider between the contact information, and the Demographics section, I was at a loss.

I had no access to the actual HTML of the page, as everything that was already added was done so in the functions.php file.  The actual page built with beaver builder had one simple shortcode on it 

[charitable_donation_form campaign_id=123]

The only thing I could think of, was to do some sort of border, on the top or bottom of an element.  I was easily able to target a selector, and add ‘ border-bottom: 1px solid #ffffff; ‘.  

The problem with this, was that it created the border IMMEDIATELY after the element, no padding, no space in between.  I looked up some answers, and tried a few.  But they didn’t work.

For this to work, you MUST targe the pseudo-element of :before, or :after, as we are creating what appears to be a line above, or below an element.  

“I tried targeting the pseudo element :after, with { content: ” “; } but that did not work.”

phone_label:after {  

      content: ”  “;

 }

Finally I came across a working solution.  I had not seen this one before, but it worked very well!  It was the same code I had been using, except inside of the quotations, we put “/0a00”.  

phone_label:after {  

      content: ” /0a00  “;

 }

About The Author

Scroll to Top