Tagged: after
Hi,
I am trying to duplicate the look of the site below with lines on either side of the title LONDON.
I found this code:
/* Lines either side of Denmark */
@media screen and (min-width: 36em) {
span.site-title-denmark:before, span.site-title-london:after {
background-color: #fff;
content: “”;
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 50%;
}
span.site-title-denmark:before {
right: calc(1em + 0.6rem);
margin-left: -50%;
}
span.site-title-denmark:after {
right: -1em;
margin-right: -50%;
}
but I don’t know how to target that text that says DENMARK on my page, which is an H2 title.
Can you help me with this – or let me know if there is an easier, built-in way to do this?
thanks for your help
Nancy
Hey Munford,
To achieve the results similar to the example link.
1. Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
You can now target your headings with custom css please see the below link for more info to create a similar heading style.
2. Refer to this link https://css-tricks.com/line-on-sides-headers/
Best regards,
Vinay
Thanks I got it working!