How to make Horizontal Lines with CSS only

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

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

Read this and discover how to create a separator, with a title, using WPcharitable.  This plugin ceates a page that has 1 shortcode on it, and is not editable via any  Wordpess Editors.

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  “;

 }