Advertising for home services, such as lawn care, home cleaning, and garden maintenance, isn’t as simple as tossing up an […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
6 years ago on June 7th, 2020.
Related To:
How applicant tracking systems are revolutionizing remote recruitment
Gone are the days of traditional recruitment. Applicant tracking systems have been revolutionizing how we hire, and their impact is here to stay. But how is the change happening? Tap to learn more about it.
Check out the New AI Features in FlexClip 5.0
In today's digital era, the importance of video content cannot be overstated. Videos have become an integral part of various […]
Effective Cleaning Tips for Maintaining a Clean and Healthy Home
We’ll explore some practical tips and tricks that will help you establish an effective cleaning routine. You might not realize […]
The Art of Visual Storytelling
How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
The Ultimate Guide to Choosing a Great Domain Name for Your Business
Choosing the right domain name for your business is a critical step in building a strong online presence. Your domain […]
6 Mistakes to Avoid When Creating a React-Native App
React Native is a leading cross-platform app development framework that has more than one and half thousand active contributors. The […]
Will Elon Musk Turn Twitter into a Super-App?
Elon Musk envisions a future where mobile apps are consolidated into one-stop shops within a single platform. Will he create a "super app" to rule them all in 2023? Learn about the challenges he faces and the potential impact on companies like Twitter and Apple's App Store.
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.