Hi HubSpot Community,
I’m customising a quote template and have encountered a persistent black line that I cannot remove, despite extensive attempts using custom CSS.
What I’ve Identified:
- The black line appears near the top of the quote.
- It is rendered by a ::after pseudo-element on a <div> inside the .banner__sender container.
- The styles are coming from template_main.min.css, and include:
- background-color: black
- height: 3px
- width: 45px
- position: absolute
- top: 10px
- transform: rotate(45deg)
- content: “” (empty string)
- display: block
What I’ve Tried:
- I’ve used {% require_css %} in the quote template to override this element with display: none, content: none, and reset all layout and visual styles.
- I’ve also targeted .banner__recipient and its pseudo-elements, in case they were contributing.
- I’ve used highly specific selectors, including .hs-quotes--flow .banner__sender > div::after, and added !important to every rule.
- I’ve confirmed that my CSS is being loaded, but the line still appears.
What I Need:
I’d like to completely remove this decorative line from the quote template. It appears to be hardcoded or injected in a way that prevents override via the standard template CSS block.
Has anyone successfully removed this line or encountered a similar issue? Is there a workaround or a HubSpot-supported method to suppress this pseudo-element?
Any help would be greatly appreciated!
Thanks,
Brookelynn
Hi @BGunning7 and welcome, it’s a pleasure to have you here! 
Great question, thanks for asking the HubSpot Community!
1. Could you please share a screenshot (without sensitive data) of the quote with the black line?
2. Also, can you share the code or the link to a test quote?
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.
For information on the topic, here is an article “Create and use customized quote templates”.
I’d love to put you in touch with our CSS Experts: Hi @elizheleva, @Stephanie-OG and @alyssamwilie do you have any tips to help @BGunning7, please?
Have a lovely day and thanks so much in advance for your valuable contributions! 
Bérangère
Hi Brookelynn,
as @BérangèreL mentioned, it would be great to have a screenshot. Or better still, to have a link to a dummy quote using the template. This way, I can audit the CSS and can provide further insight.
Thanking you,
Eli
Hi Eli,
Thank you for your response - attached you will find the snippets of the .css code that I have tried (this was my final attempt after numerous attempts), along with a snippet of the quote template, with the Dev Tool Element name.
Please let me know if this help, or if you require anything further.
{% require_css %}
<style>
/* Global reset */
body.hs-quotes.hs-quotes--flow,
.hs-quotes--flow,
.hs-quotes--flow * {
border-top: none !important;
border: none !important;
box-shadow: none !important;
background-image: none !important;
}
/* Remove black line from .banner__sender > div::after */
body.hs-quotes.hs-quotes--flow .banner__sender > div::after {
content: none !important;
display: none !important;
background: none !important;
height: 0 !important;
width: 0 !important;
border: none !important;
box-shadow: none !important;
position: static !important;
transform: none !important;
opacity: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Remove .banner__recipient and its pseudo-elements */
body.hs-quotes.hs-quotes--flow .banner__recipient,
body.hs-quotes.hs-quotes--flow .banner__recipient--left-align,
body.hs-quotes.hs-quotes--flow .banner__recipient::before,
body.hs-quotes.hs-quotes--flow .banner__recipient--left-align::before {
display: none !important;
content: none !important;
background: none !important;
height: 0 !important;
width: 0 !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
pointer-events: none !important;
}
</style>
{% end_require_css %}
Hi Brookelynn,
thank you for sharing the CSS. It will be good to see the html as well, as sometimes like you’ve said in your initial message, it is possible that a class is added and its inheriting the CSS, so we need the full picture. Is there a way for you to create a dummy deal and a dummy quote and then share a link to the quote here, as this way, I can see the live HTML for the quote and can do some troubleshooting.
Alternatively, is it worth us jumping on a quick call so we can see things live?
Thanking you,
Eli
Hi Eli, @elizheleva
Thank you for your response, are you available to jump on a call tomorrow afternoon at 12:30 GMT+1, or Friday at 12:30 GMT+1, I think it is definitely worth it jumping on a call to screen share.
For the moment being, here is the HTML - keeping in mind we have over 100 lines of code - this is just a peice which I think may relate.
{% require_css %}
<style>
{% if module_data|attr(‘banner_image’)|attr(‘hidden’) &&
module_data|attr(‘logo’)|attr(‘hidden’) &&
module_data|attr(‘quote_name’)|attr(‘hidden’) &&
module_data|attr(‘recipient_company’)|attr(‘hidden’) &&
module_data|attr(‘recipient_contacts’)|attr(‘hidden’) &&
module_data|attr(‘sender_company’)|attr(‘hidden’) &&
module_data|attr(‘sender_user’)|attr(‘hidden’)
%}
.hs-quotes--flow .banner { display: none; }
{% endif %}
{% if module_data|attr(‘numbered_heading’)|attr(‘hidden’) &&
module_data|attr(‘summary’)|attr(‘hidden’) &&
module_data|attr(‘description’)|attr(‘hidden’) &&
module_data|attr(‘text_with_subheading_1’)|attr(‘hidden’) &&
module_data|attr(‘list_1’)|attr(‘hidden’) &&
module_data|attr(‘list_2’)|attr(‘hidden’) &&
module_data|attr(‘text_with_subheading_2’)|attr(‘hidden’)
%}
.hs-quotes--flow .executive-summary { display: none; }
{% endif %}
{% if module_data|attr(‘numbered_heading’)|attr(‘hidden’) &&
module_data|attr(‘summary’)|attr(‘hidden’)
%}
.hs-quotes--flow .executive-summary .section-head { display: none; }
{% endif %}
{% if module_data|attr(‘list_1’)|attr(‘hidden’) &&
module_data|attr(‘list_1’)|attr(‘hidden’)
%}
.hs-quotes--flow .executive-summary .list__container { display: none; }
{% endif %}
{% if module_data|attr(‘numbered_heading_2’)|attr(‘hidden’) &&
module_data|attr(‘summary_2’)|attr(‘hidden’) &&
module_data|attr(‘paragraph_1’)|attr(‘hidden’) &&
module_data|attr(‘paragraph_image_1’)|attr(‘hidden’) &&
module_data|attr(‘paragraph_image_2’)|attr(‘hidden’) &&
module_data|attr(‘paragraph_2’)|attr(‘hidden’) &&
module_data|attr(‘resources_header’)|attr(‘hidden’) &&
module_data|attr(‘resource’)|attr(‘hidden’) &&
module_data|attr(‘testimonials_header’)|attr(‘hidden’) &&
module_data|attr(‘testimonial’)|attr(‘hidden’)
%}
.hs-quotes--flow .our-story { display: none; }
{% endif %}
{% if module_data|attr(‘numbered_heading_2’)|attr(‘hidden’) &&
module_data|attr(‘summary_2’)|attr(‘hidden’)
%}
.hs-quotes--flow .our-story .section-head { display: none; }
{% endif %}
Hi Eli,
If we could jump on a call and I can take you through the HTML and .CSS file, that would be great - it may also be quicker. Are you available tomorrow at 12:30? Or, Friday at 12:30?
Hi Eli,
If we could jump on a call and I can take you through the HTML and .CSS file, that would be great - it may also be quicker. Are you available on Monday at 12:30? Or, Tuesday at 12:30?
Hi Brookelynn,
Send me a calendar invite for today or tomorrow, I’ve sent you my email on DM. My availability for today and tomorrow is quite good, so send it for a time that works for you and let’s get this sorted. 
Thanking you,
Eli
Hi @elizheleva, I hope that you are well!
Thanks so much for your help and message
The HubSpot Community is a shared space of connection and learning.
Help make the HubSpot Community a richer place by sharing your expertise here, on this public space please, so that other Community Members can get help too!
Thank you very much!
Have a lovely day!
Bérangère
Hi Bérangère,
Thank you for the prompt to share the outcome. We only had the call yesterday and will be finalising things tomorrow hence I’ve not published the official solution.
What seems to have happened though is that the template that was cloned was using an html file from the marketplace theme. This meant that even though the css could have had the right definitions, the html file was referencing a different css file.
A simple solution that worked in the end was to clone the proposal.html file from the marketplace theme to a child theme, then within the quote template UI we selected “customise quote template” and selected the template we had just cloned. Then within that we ended up removing a class on one of the divs that was pulling this line given that for the purpose of what Brookelynn wanted to do, none of the styling was needed.
Should we find anything else, I’ll update the post 
Thanking you once again for thr tag.
Here to help,
Eli
Hi @elizheleva, thank you so much for taking the time to share the solution with the Community!
This will be extremely helpful for many other Community Members who find this thread! 
I love to read your valuable insights and thanks again for all your help, it is much appreciated!
Have a great day!
Bérangère
