Line height when using ::marker

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
rjplano
Propeller Head
Posts: 51
Joined: Tue May 05, 2020 10:08 am

Line height when using ::marker

Post by rjplano »

I'm using the ::marker selector to place a specific bullet in front of my unordered list items. I want the bullet to be a bit larger so I set a larger font size there.

ul > li::marker
{
content: '\2022';
font-size: 2em;
}

Unfortunately, this messes up the line spacing between the list elements as compared to the spacing of list items with standard size bullets. I've tried various configurations and selectors for applying the line-height parameter, all to no avail. Is there a way to adjust the list items spacings when using a larger bullet?

Thanks.
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Line height when using ::marker

Post by doloremipsum »

You're not applying line-height to the ::marker selector, are you? I think you'd need to apply it to the li selector.
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
rjplano
Propeller Head
Posts: 51
Joined: Tue May 05, 2020 10:08 am

Re: Line height when using ::marker

Post by rjplano »

doloremipsum wrote:You're not applying line-height to the ::marker selector, are you? I think you'd need to apply it to the li selector.
Good question. To clarify, I am applying it to the li selector itself, not the ::marker selector.
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Line height when using ::marker

Post by doloremipsum »

Oh wait, it just occurred to me that the line height will control the space between individual lines in the same block (i.e. when the one li runs over several lines). You probably actually want to increase the margin or padding around the li - have you given that a go yet?
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
rjplano
Propeller Head
Posts: 51
Joined: Tue May 05, 2020 10:08 am

Re: Line height when using ::marker

Post by rjplano »

doloremipsum wrote:Oh wait, it just occurred to me that the line height will control the space between individual lines in the same block (i.e. when the one li runs over several lines). You probably actually want to increase the margin or padding around the li - have you given that a go yet?
I had tried modifying the padding and margin previously, but went back and gave it another try after your post. Finally figured out that padding didn't work and I needed to add a negative top margin to the first li:

ul > li {
margin-top: -4pt;
}

and then remove that margin for lower level unordered list items:

ul ul > li {
margin-top: 0pt;
}

Thanks for pointing me in the right direction!
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Line height when using ::marker

Post by doloremipsum »

Negative margins are definitely not something I would have thought of, but I'm glad you found something that worked!
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
Post Reply