Archived topic
Seperator
6 replies · Started by Andrew on October 20, 2021
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';
}
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.
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%;
}
I do have Generate Blocks if you know of a easier way Id be happy to try that as well!!
This is what i am seeing, and the code i provided is working for the Separator block:
https://www.screencast.com/t/NxAXUfRI
So whats the issue ? Do you want to have the Downward Arrow centred below the Heading ?
Dang cache thought I cleared it sorry!
I assume that its working as expected then :)
Glad to be of help
