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

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

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.
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 […]