Title With Lines On Sides in Oxygen (CSS Only)

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.