How to reproduce this bar behind the text

[rafaelbata]

How to add this style of bar behind the text? What CSS parameters should be used?

See image for reference of bar that sits behind the text.

[suyash1]

@rafaelbata - can you please share the page where you got this?

[rafaelbata]

This is the reference webpage, the bar is located within the home page:

https://vikitakids.com/

[Dan-From-Ryviu]

Hi @rafaelbata 

Please give me your page link containing the text you want to display like this so we can check and give you the code. 

[PageFly-Richard]

Hi @rafaelbata 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.your-title {
    display: inline-block;
    position: relative;
    z-index: 9;
}
.your-title:after {
    content: "";
    height: 8px;
    background:#f0449a;
    opacity: .7;
    position: absolute;
    bottom: 4px;
    opacity: .3;
    left: 0;
    width: 100%;
    z-index: -1;
}
</style>

The code above is assume your title has the class: .your-title, you can change the class to match your structure

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[rafaelbata]

Thanks everyone. I managed to reproduce the way I needed.