css custom bullets position

Question

i have set
li{
list-style-type:noe
}
/*custom sign for list item*/
li::before{
content:'\2618';
display:inline-block;
}
but when i run it .
custom conten is not aligned with the list item
check out this code:
https://code.sololearn.com/Wao18gdsAVQm/#

Answer 1

Side note: You should put something in the actual list item outside of the pre tag to be able to see the inline-block/vertical-align fix work more clearly. Right now, all your text is contained in the pre tag, which has its own formatting. I would personally make it a habit to set all the margins of the elements I plan on using to zero, or, in the least, set the top and bottom margins of pre to zero.

Answer 2

Janning⭐ Either this is not working

Answer 3

Janning⭐ i have added now in my code. and i had tried this before but it didn't work.

Answer 4

Try

pre {
display: inline;
}

then use padding and vertical align in li to adjust accordingly.

vertical-align can only work on parent with inline display so that its parent has base line it can to refer to.

Answer 5

For your li::before, you will want to display: inline-block; so that you can use vertical-align on it to adjust.

Answer 6

I don't see the vertical-align part in your code.

Answer 7

Did you save it after you added the vertical-align? I still don't see it.

Answer 8

Vertical-align works fine when the parent is not inline. Lists are cases in point. <li> is the parent and has display: list-item; by default. li::before and pre are both children of li. But yes, you would want siblings to be either inline or inline-block.