Flexbox and Nested Flexboxes CSS Social Links Profile Card

What are you most proud of, and what would you do differently next time?

Creating this social card was a great experience, and a very fun project. It helped me deep dive the fundamentals of flexbox and CSS transitions.

I would probably choose a different coloring scheme, so I can practice on color pairing as much as I can.

What challenges did you encounter, and how did you overcome them?

While I was creating my hover effect to display my social icons, there was an issue where the horizontal scroll bar would appear because I have set my icons position to right: -100% .

Setting my icons position to right: -100% triggered content the my overflowing the horizontal axis of its container (.card-content .card-content-button).

To fix this issue, I simply used overflow-x:hidden to hide any any content that overflows the container horizontally will be clipped and hidden from view. Thus, fixing my scrollbar issue.

What specific areas of your project would you like help with?

Since, I used abbr tag with a title, the text is presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Without using Vanilla JavaScript, how can I style this default tooltip using only CSS?