[Resolved] Seperator

Home Forums Support [Resolved] Seperator

Home Forums Support Seperator

  • This topic has 6 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1970176
    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’;

    }

    #1970187
    David
    Staff
    Customer Support

    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.

    #1970200
    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%;
    }

    #1970201
    Andrew

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

    #1970429
    David
    Staff
    Customer Support

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

    2021-10-21_10-09-31

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

    #1970534
    Andrew

    Dang cache thought I cleared it sorry!

    #1970552
    David
    Staff
    Customer Support

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.