How to add horizontal line with custom liquid code

[INKLY]

Hi, I would like to add a horizontal line below the price on my product page like this: 

I tried this: 

But the padding is too big. Does anyone know how I can achieve something like on the Bleame website? Thank you for your help. 

Best regards,

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=163175923977

[Moeed]

Hey @INKLY 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
div#price-template--21926318113033__main {
    border-bottom: solid 1px #00000038;
    padding-bottom: 10px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[INKLY]

Thanks that's exactly what I wanted. However the text below is a bit too close from the line, do you mind helping me solve that? Thank you! 

[Moeed]

Hey @INKLY 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

p.product__text.inline-richtext:nth-child(8) {
    padding-top: 20px !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-HDL · Accepted solution]

Hi @INKLY, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  .price.price--large.price--on-sale {
    padding-bottom: 20px;
    margin-bottom: 30px;
    position: relative;
}

.price.price--large.price--on-sale:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #00000017;
    bottom: 0;
    left: 0;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[INKLY]

Thank you very much !

[BSS-TekLabs]

- Here is the solution for you @INKLY 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

    .price--large {
            border-bottom: solid 1px black !important;
    padding-bottom: 10px !important;
    }

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.