Archived topic
Page Hero After
3 replies · Started by Brandi on March 9, 2020
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?
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
Works great! Thanks for the help!!!
You're welcome
