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 3 years ago on June 7th, 2020.

Related To:

Tags: |
How a Rephraser can Help you Improve your Social Media Presence

Having a problem with your social media content? Too much competition to deal with? Worry not! Here is how a Rephraser can help.

How Automation Software Help with Payroll Processing

Automation software greatly reduces payroll processing errors, enhances compliance, increases efficiency, and makes paychecks easier to create and file. Automation […]

How To Stay Safe While Surfing The Internet

The Internet is a part of our everyday life nowadays. Every day we spend a good amount of time on […]

Business Books Entrepreneurs Must Read to Dominate Their Industry

Whether you aspire to start a small business or launched a digital marketing agency, you must spend sufficient time reading […]

The Creative Entrepreneur: Exploring Career Opportunities for Innovators and Problem-Solvers

All entrepreneurs need problem-solving and innovative skills. Finding solutions or creating new possibilities is accomplished through problem-solving. The ability to […]

Top 2D Animation Tools in 2023

Shopping for 2D animation software for your next project? Here are five of the best 2D Animation tools that are worth exploring.

Is Link Building Essential for WordPress Website

In current digital marketing, inbound link creation directly correlates with online success. Link building is all about gaining inbound connections, […]

What and How Web-Based CRM Matter for Your Business

As a business owner, you know that maintaining strong customer relationships is crucial for success. A customer relationship management (CRM) […]

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.