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 1 year ago on June 7th, 2020.

Related To:

Tags: |

pCloud Lifetime 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.

Do we all agree that Coffee is the fuel that feeds the free content creating?
What Is 3D Game Art?

We are witnessing the rise in popularity of 3D game art. But what is it? The essence of it is the integration of imaging with digital media technology.

How to Choose the Right Graphic Design Course Online?

How we view the world affects how we navigate it. Designs are crucial to the experience that we get. Design […]

5 Advantages of Social Network Advertising & Marketing

It is a common fact that whenever any person starts a business, he tries to increase its scale as up […]

Technology & Software in Fire Prevention

Fire prevention is a very crucial affair, and it should be taken seriously by everyone. If a fire ever breaks […]

8 ERP Trends to Watch Out in 2021

Enterprise resource planning (ERP) solutions have matured and expanded their reach to support more and more business/organization functions, from back-end […]

Understanding Types of Website Errors

Understanding types of website errors is crucial if you care about browsing the internet trouble-free

3 Content Marketing Mistakes Your Business Might Be Making

Get the most out of your business content marketing strategy by avoiding these common mistakes

menu-circlecross-circle