Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP PHP & Databases with PDO PDO Queries & Results Working With Results

Derek Derek
Derek Derek
8,744 Points
Posted by Derek Derek
Derek Derek
8,744 Points

Where does the HTML file import the camera image with numbers in them?

I am curious where the image is coming from.. In the inspection page, it says they are from li::before in the foreach loop but I have no idea where that is from..

Thanks for your help!

1 Answer

Jose Vaca Cipres
Jose Vaca Cipres
10,724 Points
Jose Vaca Cipres
Jose Vaca Cipres
10,724 Points

There are not images. It's just pure CSS. Check it out in your editor text:

HTML:

<ol> <li><i class="lens"></i> Example One</li> <li><i class="lens"></i> Example Two</li> <li><i class="lens"></i> Example Three</li> </ol>

CSS:

li { padding: 8px 0; display: list-item; width: 100%; margin: 0; counter-increment: step-counter; }

ol li::before { content: counter(step-counter); font-size: .65em; color: #fff; font-weight: 300; padding: 2px 6px; margin: 0 18px 0 0; border-radius: 3px; background: #8d9aa5; line-height: 1em; }

.lens { display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #8d9aa5; border-radius: 5px; position: absolute; margin: 5px 0 0 -19px; }