[Resolved] Seperator

[Andrew]

Is there an easy way to make something like this with GB or just using the seperator? Sorry if posted in the wrong form.

If tried just adding a seperator, and using the pseudo after but i can’t get it to display unless I use absolute. The arrow im using is from second link.

Third link is my failed attempt.

Code I’m trying – Please not if I add position: absolute, and left:50% its gets close but I cant get it to touch the line and have the line thicker, any help would be apprecaited!
hr.wp-block-separator{
width:40%;
margin:0 auto;
}

hr.wp-block-separator::after{
content:’\25BC’;

}

[David]

Hi there,

try changing your current CSS to:

hr.wp-block-separator {
    width: 40%;
    margin: 0 auto;
    position: relative;
}

hr.wp-block-separator::after {
    content: '\25BC';
    position: absolute;
    top: -7px;
    left: calc(50% - 6px);
}

May need to tweak the top position. And the left calc is simply 50% across minus half the width of the unicode character.

[Andrew]

Thanks David, the content portion was a typo on my end, however I still can’t seem to make it work for the life of me, I added some dummy text and added it to the h2 below it how I normally would with the following code. Could it be a bug with the seperator itself? I’m far from an expert but I’ve done it a few times in the past and don’t remember having this issue.

Below that I added an h3 and centered it, so I’m at a loss why I can’t get it to show for the hr

hr.wp-block-separator {
width: 40%;
margin: 0 auto;
position: relative;
}

hr.wp-block-separator::after {
content: ‘\25BC’;
position: absolute;
top: -7px;
left: calc(50% – 6px);
}

hr.wp-block-separator {
width: 40%;
margin: 0 auto;
position: relative;
}

h2::after {
content: ‘\25BC’;

}

h3 {
position: relative;
}

h3::after {
content: ‘\25BC’;
position: absolute;
bottom: -37px;
left: 50%;
}

[Andrew]

I do have Generate Blocks if you know of a easier way Id be happy to try that as well!!

[David]

This is what i am seeing, and the code i provided is working for the Separator block:

So whats the issue ? Do you want to have the Downward Arrow centred below the Heading ?

[Andrew]

Dang cache thought I cleared it sorry!

[David]

I assume that its working as expected then 🙂
Glad to be of help

[Author]

Posts