Archived topic
h2 background colour effect
5 replies · Started by Fraser on March 6, 2021
I'm trying to add a coloured background to h2 headers, like this.
https://www.screencast.com/t/NNtORsNCCxai
here's an example url
https://rightmessage.com/articles/garden-room-guide-case-study/
The css, I think is as follows. I added this code to Additional CSS box (remove .markdown-article) but no luck. Any ideas ?
.markdown-article h2:after {
content: "";
position: absolute;
width: 100%;
z-index: -1;
left: 0;
bottom: -2px;
height: 14px;
--bg-opacity: 1;
background-color: #fed7e2;
background-color: rgba(254,215,226,var(--bg-opacity));
}
Hi there,
can you share a link to your site where you're trying to add this CSS?
Try this CSS method:
.entry-content h2 {
display: inline-block;
box-shadow: inset 0 -17px 0 0 rgba(254,215,226,1);
}You can adjust the -17px value to change the background color height.
brilliant David, really appreciated :)
You're welcome
