The class of heading 2 tag is .wp-block-heading and I want it to have a verticle line joining the next heading 2 subsequently until the last heading 2. There’s no code yet for this question. However, it’s for the WordPress theme blog section.
Hi @KiruiPatrick — We’d really need to see some code or at least an image of what you’re trying to achieve. The code matters, because most likely it will be used as a hook to get the effect you want.
1 Like
Here’s the code so far the section
.entry-content.clearfix h2 {
counter-increment: list-number;
display: inline-flex;
align-items: center;
}
.entry-content.clearfix h2::before {
content: counter(list-number);
margin-right: .31em;
width: 45px !important;
height: 45px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 16px;
background-color: #030917 !important;
border-radius: 22px 2px 23px 1px;
color: #fff;
margin-left: -55px;
}
.entry-content.clearfix h2:last-of-type::before {
margin-right: .31em;
width: 35px !important;
height: 35px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 16px;
color: #d5eac7 !important;
margin-left: -40px;
background: #cef0b7 !important;
}
This is the image
We’d need the html for that section also.
It’s likely that a wrapping div or the inner elements would be used for the line rather than the h2 as the H2s have no range.
Or you just add very long lines and hide the overflow in some way but all require specific html to work with.
Looking at that html the only realistic way to do this without changing the html or using js is to use overflow hidden on the wrapping div and apply the line using a pseudo element on the h2. The line would be very long and gets cut off by the overflow.
The last h2 would then need a line in the background color to rub it out after the last h2.
I’m not at my desktop at the moment but I can show a demo later.
1 Like
Thank you. I’m waiting for the demo.
Here’s proof of concept in a codepen.
Click on the Edit on codepen link to see full size.
Obviously that will need to be tailored to your exact requirements but the proof of concept is working. The only problem could be is that you require visible overflow in that section then the method can’t be used.
I don’t see any other ways to do this other than using js to shim a div around all the h2s in that section or indeed manually altering the html so that an easier approach can be taken.
1 Like
Wow! It works. Thanks a lot for your generous help. I customized some CSS and disabled the following code and it gave me the desired results:
.entry-content:has(h2.wp-block-heading) {
/* overflow: hidden;*/
}
The complete code to achieve the needed results is as follows:
/* special rules for the line using the :has selctor so only for modern browsers */
.entry-content:has(h2.wp-block-heading) {
/* overflow: hidden;*/
}
.entry-content:has(h2.wp-block-heading) h2.wp-block-heading {
position: relative;
}
.entry-content:has(h2.wp-block-heading) h2.wp-block-heading::after {
content: "";
pointer-events: none;
position: absolute;
left: -35px; /* adjust to suit*/
top: 0rem; /* adjust to suit*/
width: 5px;
height: 999rem;
background: #dddee1; /* The line color*/
z-index: -2;
}
.entry-content:has(h2.wp-block-heading)
h2.wp-block-heading:last-of-type::after {
background-color: white; /* must match the original background*/
top: -0.4rem;
z-index: -1;
}
/* This next rule for testing only as you probably have something in place already */
.entry-content {
padding-left: 60px;
}
/* The code you posted is below but I commented out the last-of-type h2 as it made no sense as it was a smaller size, different color and shifted right out of line. */
.entry-content.clearfix h2 {
counter-increment: list-number;
display: inline-flex;
align-items: center;
}
.entry-content.clearfix h2::before {
content: counter(list-number);
margin-right: 0.31em;
width: 45px !important;
height: 45px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 16px;
background-color: #030917 !important;
border-radius: 22px 2px 23px 1px;
color: #fff;
margin-left: -55px;
}
:root {
counter-reset: section;
}
.entry-content.clearfix {
border-left: 10px solid #d9f0c4;
padding: 1rem;
margin-inline-start: 2rem;
position: relative;
}
.entry-content.clearfix h2::before {
counter-increment: section;
content: counter(section);
display: inline-block;
margin-inline-start: -3.5rem;
margin-inline-end: 0rem;
width: 2.5ch;
height: 2.5ch;
border-radius: 100%;
background: #d9f0c4;
text-align: center;
}
Here’s the screenshot of the output.
4 Likes