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 6 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.

0/5 (0 Reviews)
Do we all agree that Coffee is the fuel that feeds the free content creating?
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 […]

How Good UX is Designing A Better Future For Online Shopping

Why so many consumers prefer shopping online in 2020? The obvious answer is ‘coronavirus’, but it’s not as simple as […]

How to Start a Successful Online Business

Creating an online business is an exciting endeavour, but it can feel a little overwhelming if you are unfamiliar with […]

5 Benefits of Professional Commercial Cleaning Service

People spend a lot of their time at workplaces, which is why it is essential to keep the workplaces clean […]

5 Tips on Creating Marketing Videos on a Budget

Video marketing is the way forward. Businesses that are failing to leverage the power of video marketing are falling behind […]

Five Essential Law Firm Website Requirements

Five Essential Law Firm Website Requirements The best law firm website is one that lets you accomplish the key purpose […]

Leave a Reply

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

chevron-downmenu-circlecross-circle