Stylish and Responsive Recipe Page

Hi, congrats on completing the challenge!

Here is a list of pointers you can check out to improve the accessibility of your solution:

• Use <strong> in your lists instead of the styled span. It has semantic meaning and is useful here to act like a label for the line. "total (the label): about 10 minutes (the description)."
• It's correct to use a table, but tables have other elements such as tr, td, th, and more. Check them out to make it more semantically correct.
• Use a modern CSS reset in all of your projects. Check out Josh Comeau and Andy Bell.
• Don't set a fixed width in pixels. Use a max-width and use rem. Currently, your solution doesn't scale if the user zooms because of this fixed width in pixels. It creates a bad user experience.
• You should use relative units for everything related to fonts. Check out this great article to understand why: Why font-size must NEVER be in pixels
• Ideally, your media queries should use relative units such as rem as well, so your content can scale correctly if the user increases the system default font size.

I hope you find something useful in this list to improve the semantic structure of your solution and make it more accessible. Let me know if you need more explanation on any of the points.

No need for the ::before, use ::marker instead. You don't have to complicate things. The only thing is with ::marker, you can only change the padding-right and color of it. Other properties wont like work in the way that you expected it to be.