I’d like a review of my markup for Advanced form styling 1 skill test. Codepen here.
I struggled with completing requirement 6 of this assignment and kind of had to find my own way to a solution. The marking docs state we should apply the following css to insert the magnifying glass icon but it did not work for me:
I tried using ::before and ::after on the <button> and <div> selectors respectively but it still didn’t render correctly on screen.
Are there any previous css declarations that prevented me from adding the generated content in the way proposed above? Anything else that would be the issue?
When using prefixed and non-prefixed props you should always put the prefixed one first. This way when the browser finally supports the non-prefixed version it will overwrite the prefixed one.
You don’t need the flex-direction on the button, because the button isn’t a flex container.
@mikoMK thanks as always for feedback and guidance!
I did get to it being a path issue but disregarded it too quickly, must have been staring at the CSS for too long so ended up overcomplicating the issue at hand .