Submitted over 4 years ago

Article Preview Challenge using Flexbox

@eyobofficial

A solution to the Article preview component challenge

Solution retrospective

Hi, How did you implement the share tooltip functionality, especially the little downward-facing arrow below the social media icons? I implemented it using the font-awesome arrow icon and absolute positioning but I suspect that's not the ideal solution.

Code

Please log in to post a comment

Community feedback

Jen•1,230
@En-Jen
Posted over 4 years ago
Hey Eyob, overall it looks like a really clean solution 💪 Feel free to check out my solution for how to code the little downward-facing arrow below the social media icons. I did it in CSS with the ::after pseudoclass. It would look something like this:
```
.share-tooltip::after {
                content: '';
                width: 0;
                height: 0;
                border-top: 12px solid $color-gray-darkest;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
```
Then you would just position it with absolute positioning. Hope that helps!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord