Styling your list-items just got so much easier with this ::marker

Any time I say pseudo-element in this video, I mean ::before and ::after. As the title of the video says, ::marker is a pseudo-element. I'm just so used to saying it to only refer to before and after, and I didn't realize it until I was editing. Sorry about that!

I really love the way you CSS !!!

To center icons center and nice fit with li element I still prefer to add span inside li element and make li display: flex and align-items: center;

Doesn't list-style do the same job? I always found custom icons on lists to be easy to implement.

Sir,

Where do you get the latest update on web development

thanks sir You solve my issue
You are awesome teacher
I love they way you guide us

😃🤩

Does somebody know how to make "content" changes work on mobile chrome?

thanks
for this video, but i have a problem, not all unicode icon work for me. In my case i see only the plus icon unicode work, but others no.

Hey! Does anyone knows how we can change it's size?

Just curious, is it possible to change only the second marker and leave the rest as a bullet?

Pure Gold , as usually!

ol's are a whole other story

How do you adjust the spacing between items? Line height doesn't do work as it messes with items that cover more than one line.

It's a long time since I learned something delightingly new in css

I see the icon as a small square. Can't see it. If I copy de code I just see the text of the code. In some moment font awesome changed and starting requiring a code for a kit that is received in your email account. I remember needing to declare it in the head of html fight

hohoho

Thanks!

this, is, awesome. ::marker is the new king of lists!

Does this not work on Safari for Font Awesome icons?

Love your videos Kevin! <3 can you tell me what font-family are you using in Codepen?
And also: how can you add an svg to content property? 🤔
Thank you! 🙏🏻

Can the marker be moved up and down to better lineup with the text if needed.

Hi Kevin,

I just discovered your channel yesterday and I've been binge watching your videos. It's amazing how much I was able to learn in such a short amount of time thanks to the way you explain and show things. Thank you for creating and sharing these videos!

I'd like to ask you something about the ::marker element. Is there a way to use it for unordered lists so that the markers are aligned with the rest of the content and the texts of the list items stay aligned even when those texts continue on a second line?

I love your elegant solutions and I'm looking forward to your solution for this. Thank you in advance! :)

Excellent video. I have 1 question. Say I have a long string of text that wraps onto another line, is there a way to align the marker with the text.

e.g.

//Unwanted behaviour

* verylongtext onto new lines
keep on going and going and going
and going and going

//Desired behaviour


verylongtext onto new lines
* keep on going and going and going
and going and going

I believe this is not possible due to the way pseudo elements work

As someone who designs cruise websites, believe me when I say, we would use anchor bullet points 😂

you sir are a legend!

I would really like to see a video along the lines of "Things we used to do with JS, now available to CSS."

Hey Kevin, you are my all time favourite.
A small question here;
If I am using the font-awesome npm package, do I have to set the font-family to font-awesome, in case to use any FA content like you showed !!!

You can just add a SPACE after the icon code in the CONTENT element. All the extra coding to do something as simple as add some space after a bullet icon is totally unnecessary. Why use padding or margin when a simple space will do?

If you're using Font-Awesome for the bullets, are the contents of the ::marker automatically aria-hidden? You mention you can use SVGs but promote Font-awesome. Shouldn't people avoid Font-awesome because of the accessibility issues?

Great stuff as always - though sadly Safari (14.0.3) does not seem to support the 'content' attribute while using 'marker'.

How do we access the content of the ::marker. The getComputedValue() works on ::before and ::after but not on markers.

Great Job buddy !
You channel has become my daily inspiration.

Using what I learn professionally as much as on personal projects!
love it,
Keep up the great work !

How can I set display:none to a ::marker? :(, because a theme in wordpress hard-coded marker to each list, and I can't remove it with list-style: none; ... and I also can't use display: none; to these ::marker pseudo-elements..

Great video! For the li padding, you could use: padding-inline-start: 0.5em; to support rtl also.

Man, u looking handsome! 👊😂

But margin-right and padding-right do not produce any effect on the ::marker pseudo element's position relative to its parent . . .

THIS I did not know. Thanks Kevin!

Thanks again man. <3

Safari doesn't support the content style on ::marker which, to me, is the most important one.

How would use content to refer to my own svgs?

I like the fact that you videos are short and to the point. I hate sitting through long presentations for the one thing I want to learn. I end up just bailing and looking it up on stack overflow or something similar. With your presentations I don't have that issue. I look for the video that covers what I want to learn and you are very thorough, but very concise. Great job.

Not “marker“, changed everything, “Kevin“ did! Thank you so much, dude!

Nice tutorial, but I wouldn’t endorse using icon fonts. They are not always friendly to screen readers, especially outside of pseudo-elements, and they needlessly take up a lot of space. SVG = 🎉

isn't this exactly the same as ::before? what are the advantages

thank you for the great content, again and again!

Solid vid's, really appreciate your channel. Thanks again!