PIT Designs Logo

Title With Lines On Sides in Oxygen (CSS Only)

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 8 months ago on June 7th, 2020.


Tags: |

Up to 35% OFF AliDropship Plugin

Working on a website, I needed to create a title with lines on sides.

A sort of text-decoration-cool-design-thing.

That looks like this

Title-With-Lines-On-Sides-(CSS)
from: functionandform.com.au

A quick search online gave me, some plugins, shortcodes.. and there was something about Elementor, that adds a bunch of divs for this...

No!

All you need is a text or heading element and some CSS.

So, I thought I'd share with you, how I created that with CSS only, inside of Oxygen builder.

The trick is, ::before [title] ::after

Fancy Title

Let's add a heading, and give it a class fancy-title

And apply this CSS to the fancy-title

.fancy-title {
  display: inline-block;
  position: relative;  
  line-height: 1px;
  margin-top: 1em;
  margin-bottom: 0.8em;
}

The Lines (Pseudo-Elements)

Work the magic of CSS. The fancy title needs to have a before and after Pseudo-element which will act as the lines on both sides of the title.

.fancy-title:before, .fancy-title:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #afafaf;
  border-top: 1px solid #afafaf;
  top: 0; 
  width: 40%;
}

.fancy-title:before {
  right: 100%;
  margin-right: 15px;
}

.fancy-title:after {
  left: 100%;
  margin-left: 15px;
}

Make it your own!

The code above is what I used to create the sample shown. However, you can easily adjust the values, such as width, border color, etc.. To match your design.

5/5 (1 Review)
Do we all agree that Coffee is the fuel that feeds the free content creating?
6 Ecommerce Digital Marketing Tips for More Online Sales

Online sales are on the rise. Ever since the coronavirus pandemic broke out, people have switched to ecommerce. It has […]

7 Ideas for a Successful Online Business in 2021

Starting your own online business sounds both promising and challenging because it may have its advantages and disadvantages as well. […]

7 Steps To Write an Effective eCommerce Email Copy

Email marketing might be one of the oldest tricks in the digital marketing book, but it’s still going strong. It’s […]

Copywriting Strategies & Techniques To Skyrocket Conversion Rates

Top-notch copywriting is very similar to having a great salesperson selling your products or services around the clock. By learning […]

How to Make Your Office Ready for 2021 Come Back

The current COVID-19 virus has one thing in common with every other traumatic event throughout human history. It will eventually […]

Website Copyright Laws for Online Business

If you are starting a business and are working to build and promote it, there are some important things to […]

Wave Video for Social Media Video Marketing

Social media video marketing is the hottest trend and the most effective marketing tool. It helps reach masses of the […]

Leave a Reply

Your email address will not be published. Required fields are marked *

chevron-downmenu-circlecross-circle