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

Подписаться 907 тыс.

Просмотров 70 тыс.

50% 1

Custom styling of bullet points wasn't always the easiest thing to do, but with the ::marker pseudo-element, it's a piece of cake!
Also, 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 that I didn't realize it until I was editing, sorry about that!
Codepen: codepen.io/kevinpowell/pen/ab...
More info on ::marker, including the allowable properties: developer.mozilla.org/en-US/d...
⌚ // Timestamps
00:00 - Introduction
00:40 - Basics and changing colors
02:38 - Other font-properties
03:27 - The content property
06:17 - Spacing/Positioning
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 174

@KevinPowell 3 года назад

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!

@sunilchaudhary1206 3 года назад

Not supported on IE 11 😪

@sunilchaudhary1206 3 года назад

@@-_._._- clients 😂

@karanparmar4318 3 года назад

@@sunilchaudhary1206 They should not be supported by dev world, IE11 requirement must be banned

@sunilchaudhary1206 3 года назад

@@karanparmar4318 yes I hope to do me head aches 😪

@TroyBrisbin67 3 года назад

No worries! It became a drinking game really quickly!

@moodeex3766 3 года назад

"It was doable but it wasn't a lot of fun". Nice CSS summary.

@inx1819 3 года назад

I wish this was only a joke

@Brunoenribeiro 3 года назад

the pain is real 😔

@matthewrawlings6076 3 года назад

that and, "I don't know why you would do this"

@alexnezhynsky9707 3 года назад

@@matthewrawlings6076 Product Owners: are you challenging me?

@luckyvanilla388 3 года назад

Lol

@ShintekBeats 3 года назад

The best front-end teacher I never had. Extremely helpful and just very straight to the point.

@KevinPowell 3 года назад

Thanks so much Shintek!

@dwarfbard 3 года назад

Can we just take a moment to appreciate the amazingness of the intro animation. Short, stylish and to the point.

@KevinPowell 3 года назад

Thanks! From very early on I didn't want something that would drag out for more than a few seconds. Those 20 second ones can be cool, but well, they're 20 seconds long, lol

@dwarfbard 3 года назад

@@KevinPowell and you got it bang on. Just long enough to also not want to skip it on smartphone and accidentally skip the content.

@ivanazirojevic3544 3 года назад

I got so used to watching these videos that I sometimes play the video and fall asleep with it as a backrgound noise 😂 Then I wake up and realize content of the video was super useful so I watch it again. 👌

@-Jakob- 3 года назад

sweet

@erikjansson1790 3 года назад

::marker works for as well so is much easier to customize now!

@JRK_RIDES 3 года назад

Day by day you're getting more comfortable and you're presentation is so good I can't even put it in words. I enjoy watching your videos like movies, they're that good.

@KevinPowell 3 года назад

Thanks so much Jayesh!

@skyletwings5711 3 года назад

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

@rogut8 3 года назад

How can someone dislike it? It blows my mind. Thank you Kevin, great work

@timbittins8253 3 года назад

Font awesome, video awesome, Kevin awesome. But all I heard was "cycling rainbow effect". Working on it right now.

@KevinPowell 3 года назад

Haha, nice!

@wolframzell6162 2 года назад

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

@yassinemessaoud8619 3 года назад

I love you man! the way you talk , you look and you deliver content it's just art !

@chriswinslow 3 года назад

Every time I watch one of your videos, I know I will learn something I never knew before or how to improve upon something I already know.

@MichalKall 3 года назад

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 !

@Jxerot 2 года назад

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

@SloggieBear 3 года назад

Literally got sent artwork today with custom bullets... how perfectly timed is this video! 😍

@black_platypus 3 года назад

That sound in the logo animation is so pleasant! :)

@ekeneidiagbor4678 3 года назад

I literally can't get enough from this channel. Kevin you are awesome.

@KevinPowell 3 года назад

Thanks so much Ekene!

@sandeeps7547 3 года назад

You made love CSS over the years. cheers!

@toderox 2 года назад

Pure Gold , as usually!

@dimitardimitrov4979 3 года назад

Amazing videos Kevin! I LOVE your content. I learned so much from you. Keep it up! :)

@freshpootube 3 года назад

Oh no. People who love Powerpoint will love this.

@IshanKesharwani 3 года назад

Amazing as usual *KEVIN.*

@codyshaner3258 3 года назад

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

@utsavsharma2979 2 года назад

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

@williamsimpson2303 3 года назад

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.

@williamsimpson2303 3 года назад

You should look up a company called Logical Operations. They are the offshoot of a company that was doing CBT since the 80's. They use to have a product that was very similar to what you are producing. There may be an opportunity there.

@sandrapitzke546 7 месяцев назад

I really love the way you CSS !!!

@crooker2 3 года назад

THIS I did not know. Thanks Kevin!

@koordszz 3 года назад

Awesome as always.

3 года назад

thank you for the great content, again and again!

@sakibsiddiqisupto2513 3 года назад

Wow.....Thank You Kevin🥰

@karlbesley4332 2 года назад

you sir are a legend!

@rangabharath4253 3 года назад

awesome as always

@sarahloufisher 2 года назад

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

@archiem6323 3 года назад

😃Thanks, Kevin. Love your videos.

@DoDisturbedTv 3 года назад

Thanks for video. I noticed this selector yesterday while I was debugging using the devtools.

@enijar 3 года назад

This could be really nice for styling check lists

@abdillahsyafiq 3 года назад

this is soooo coool. thanks for sharing!

@ondrejmarek9752 3 года назад

Thank you for the video! 👏

@HeyNoah 3 года назад

Soooo cool! Thank you!

@fev4 3 года назад

I can't fathom why would anyone dislike this. Thanks Kevin, keep rocking

@Sekhmet6697 3 года назад

Maybe Safari users? (Safari doesn't support the content attribute on ::marker) :(

@amanuelelhanan4716 7 месяцев назад

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;

@RoiTrigerman 3 года назад

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

@mouhamaddiop1144 3 года назад

very very very useful video. Thanks a lot Super Saiyan Kevin

@glowbug-clashofclans9116 3 года назад

See kevin video, immediately like

@hashimnaushahi 2 года назад

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! :)

@LucasFGodoy 3 года назад

I am a typesetter of books and I like to use the font Wingdings 3 and the character “u”. It gives you a nice and solid right arrow.

@quendi6687 2 года назад

7:01 you can also add a "\ " in the ::marker content value instead of doing something to li element padding

@Javascript_lover Год назад

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

@inesborges4857 3 года назад

Another awsome video

@perrymitchell7118 3 года назад

Thanks again man.

@thierryjacques222 3 года назад

Hello Kevin, a really good video again. Just a question, you add a padding on the "li", i'm used to use "text-indent" on a list to move away the text, is it a good practice or it's better to use padding ? Thanks for your answer.

@nemethricsi 2 года назад

Love your videos Kevin!

@kamruzzamankamran3233 2 года назад

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 !!!

@honeyloops 3 года назад

Hey Kevin. Another great video. Quick question, instead of putting a padding-left on the , why wouldn't you just put a padding-right on the ::marker itself?

@KevinPowell 3 года назад

Good question, lol. That would also work, or you could even include a space if you want, but not sure a space would be big enough.

@guillermoandradaFSD 3 года назад

Mind blowing 🤯🤯🤯

@yimiotomaki6577 Месяц назад

Thanks a lot!

@laranadesign4764 3 года назад

AH, thank you! I was doing WAY too much fiddly-work the old way. This is much easier.

@dillpickleMMO 2 года назад

Thanks!

@KevinPowell 2 года назад

Thanks Dylan!

@dankierson 3 года назад

1:57 I know why. Maybe a store wants people to see it's open through Covid. So they put a red heart marker before their *Open Thru Covid* line and animate it infinitely at 3 second intervals.

@dankierson 3 года назад

Yeah. Good idea.

@Po4to 3 года назад

Oh, I am definitely going to have fun with bullet styles transitions. Fontawesome icons also seem like good material for tons of useless fun! As a sidenote, any thoughts on icon fonts in the context of accessibility? Never even thought about it, but just last week I read a blog article about how they pose a problem for the visually impaired, since speech synthesizers have nothing to go on: icon fonts either have no description, or a description provided by the vendor that completely lacks context, and so it might not be clear enough what a button marked with just an icon does. The author postulates switching to SVG (whether as an external image file or inline), which lets you supply it with your own, clear and specific title/description. And I'm conflicted: I love SVG, so much - but the "kid growing up with a C64" part of me has a huge soft spot for glyphs, too.

@KevinPowell 3 года назад

Yeah, if you only have an icon for a link or button, it's important to throw an aria-label on there :)

@Dubstepschule 3 года назад

Super nice! I just wondered: Do you use CSS variables when using SASS?

@KevinPowell 3 года назад

I still use CSS ones, yup. I actually use Sass to generate them based off a Sass map :)

@jasonfowler635 3 года назад

Wow. Neat !

@KevinPowell 3 года назад

Thanks so much 😊

@chome4 2 года назад

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.

@acidhauss7018 2 года назад

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

@khaled4212 3 года назад

thanks

@seanfizzwebdesign 3 года назад

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

@mehmatrix 3 года назад

Great tutorial. Instead of using padding-left for spacing, one could also use Unicode for whitespace "\0020".. So the code ends up being: " content: '\f13d\0020'; ". Cheers,

@jdeso3 2 года назад

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

@lordrobertoguirand7789 Год назад

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.

@ramraut 3 года назад

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

@chubbyBunny94 2 года назад

ol's are a whole other story

@_vinterthorn 3 года назад

So, seeing the browser support is pretty much the most modern ones, is there a simple way to create a fallback for grandpa's browsers like IE11 which, sadly, is a requirement as far as some of my customers are concerned? I mean, I can't use a supports-query on that one as it does not come with a defining unique property, does it?

@8985792900 3 года назад

Hi Kevin, I have a question for you. I have lot of projects saved locally in my pc. What is the best way to upload all the projects to server for me to open them directly with URL? Thanks

@codewithfarhad8594 3 года назад

If they are simple web pages (html/css/js) then you can upload them on your github repos and then use github pages to host them live completely free. the 2nd option is to use netlify. you can also host complex projects (ie Django /react /angular/vue web apps on netlify but they often need configuration before deploying on netlify or any other cloud host (aws etc)

@8985792900 3 года назад

@@codewithfarhad8594 Thanks Bro

@Knards 3 года назад

You could use "\0020" in your content: put in the anchor them a space, and "\0020" content: "\f13d \0020"

@lucienchu9649 3 года назад

I was inspecting Material UI stuff for my own project yesterday and saw "::marker", and then Kevin just talked about it within 24 hrs. I am wondering whether he saw my confusing face yesterday, LOL

@Stoney_Eagle 3 года назад

I have my brand logo on my moviedb org project as a SVG and it changes the highlighting color based on the background belonging to the TV show or movie. But this is one step closer to a 90s websites with modern tools 😂😂😂

@mcglk 3 года назад

I would like to understand more about how to leverage this for numeric lists.

@romeojoseph766 11 месяцев назад

Sir, Where do you get the latest update on web development

@MegamanXGold 2 года назад

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?

@alexradu1921 3 года назад

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..

@manangupta1305 3 года назад

@6:45 we can concat ' ' (space) in content instead

@HeinekenLasse 3 года назад

I spent the whole video like: what the hell is a sudo element ? Haha

@MrsJaydot 3 года назад

Interesting! I didn't like ::marker, because I couldn't get a larger bulletpoint to align with the text baseline (or with the left margin of the main text). Now I see I can do that with FA, but in fact that takes about as many lines of CSS as my own custom styling... :)

@KevinPowell 3 года назад

I haven't tried it, but wondering if you could play with the line-height of it

@MrsJaydot 3 года назад

@@KevinPowell Thanks for the suggestion, but: nope. Line-height on the ::marker affects the list item... As far as I can tell, there is no way to influence the vertical position of the native bullet point.

@adrianpabloalvarez2523 2 года назад

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