Create a divider like this?

[bobbydaz]

Any ideas how to create a divider like this within a wordpress theme page? I've tried an em-dash but it's not long enough. thanks.

 

[BillyBobBongo]

What you're describing is know as a 'Horizontal Rule'.

Your page needs to contain the <hr> tag

You'l also need to add css styling for it to you theme. The page I linked provides this code:

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

You can also add a width variable to the css to get the desired effect.

 

[bobbydaz]

What you're describing is know as a 'Horizontal Rule'.

Your page needs to contain the <hr> tag

You'l also need to add css styling for it to you theme. The page I linked provides this code:

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

You can also add a width variable to the css to get the desired effect.

thanks so much for your help. I'm using Divi theme in which you can insert a horizontal rule within your text module, but I would like a solid rule exactly as the example image I uploaded. i.e that thickness and length. Is that an easy thing to do in Divi?

 

[BillyBobBongo]

Divi calls it the 'Divider Module', these sort of options should be available in the 'General Settings' for that particular module. You will need to set some custom CSS to control the width though, as well as setting centre alignment for the rule.

You can do this by pasting this code in the 'Main Element' field in the 'Custom CSS' tab

    margin-left: auto;
    margin-right: auto;
    width: 10%;

 

[bobbydaz]

Divi calls it the 'Divider Module', these sort of options should be available in the 'General Settings' for that particular module. You will need to set some custom CSS to control the width though, as well as setting centre alignment for the rule.

You can do this by pasting this code in the 'Main Element' field in the 'Custom CSS' tab

    margin-left: auto;
    margin-right: auto;
    width: 10%;

thanks very much, that worked, but how do i fix the spacing before and after the divider? I want equal spacing above and below the dividing line.

I've attached my divi page set up and it currently displays like this...

 

[NutsNGum]

Personally, I'd avoid doing this with hr elements, as it means having to add another html element whenever you're replicating the style. Which is just a bit of a faff.

Do it with a :before or :after pseudo element and you'll be able to create this same effect by just adding a class or by including the element itself.

 

[bobbydaz]

Personally, I'd avoid doing this with hr elements, as it means having to add another html element whenever you're replicating the style. Which is just a bit of a faff.

Do it with a :before or :after pseudo element and you'll be able to create this same effect by just adding a class or by including the element itself.

sorry that's gone right over my head, not that familiar with code.

 

[olup]

sorry that's gone right over my head, not that familiar with code.

A pseudo element is an element that's not actually in the DOM and is usually used for small decorative things like what you're trying to achieve.

I made a jsbin, so you can see how they work.
https://jsbin.com/nizugehube/edit?html,css,output

You can read up on pseudo elements on MDN: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements

 

[bobbydaz]

A pseudo element is an element that's not actually in the DOM and is usually used for small decorative things like what you're trying to achieve.

I made a jsbin, so you can see how they work.
https://jsbin.com/nizugehube/edit?html,css,output

You can read up on pseudo elements on MDN: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements

thanks, that worked for me! now got it roughly how i want.