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.
Line height when using ::marker
-
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: Line height when using ::marker
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.
Re: Line height when using ::marker
Good question. To clarify, I am applying it to the li selector itself, not the ::marker selector.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.
-
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: Line height when using ::marker
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.
Re: Line height when using ::marker
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: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?
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!
-
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: Line height when using ::marker
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.