Page Hero After

[Brandi]

I am trying to add a line similar to the gold line on https://demo.studiopress.com/essence/sample-page/ after the Page Title.

My site http://brandibelt.flywheelsites.com/privacy-policy/

I am using the following code but running into constant placement issues.

.page-hero:after {
background-color: red;
bottom: 300px;
content: ”;
display: block;
height: 40px;
left: 50%;
margin-left: -1px;
position: absolute;
width: 2px;
}

Is there a better way to add the line?

[David]

Hi there,

try this CSS:

.page-hero {
    position: relative;
}

.page-hero:after {
    background-color: red;
    content: '';
    display: block;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    width: 2px;
    height: 60px;
    bottom: -30px;
}

The line is now positioned relative to the hero element. The bottom should be negative 50% of the height. So if the Height was 100px then bottom should be -50px for example

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brandi]

Works great! Thanks for the help!!!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts