css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Social media icons by Kieran Hunter :)


  1. Really nice work!

    My question might be completely silly, i am just learning CSS...

    I was trying to understand this part of your code

    a span:before { content:''; width: 0; height: 0; border-left: 5px solid blue; border-right: 5px solid blue; border-top: 5px solid #fff; position:absolute; bottom:-5px; left:40px; }

    But got really confused... Could you please explain where the triangle shape comes from? I played around the lines but still can't understand how solid left and right borders of an empty object created diagonal lines.

    Thanks in advance!

  2. @alahab They are after and before elements. They don't need to be written in HTML; (Here span is the parent element and) (They are very useful in shortening code when cloning dribbble shots!) Some more can be found here. Hope you understand!

  3. @XDBoy018 Thanks a lot for your reply! The link is very useful, i will refresh my knowledge about pseudo elements :)

    I might have been not very clear in my question... i was confused about the triangle shapes created by the borders. Anyway i accidentally bumped into this pen a few minutes ago - http://codepen.io/chriscoyier/pen/lotjh

    What a luck :D

  4. @alahab Thanks man! :)

    I got the triangle codes from Chris himself: http://css-tricks.com/snippets/css/css-triangle/

  5. I like how you can quickly shake your mouse on and off them and watch the tooltips ascend to the heavens :)

  6. haha thanks :P @winger

  7. Where can I get the content? '\f09a' '\f099'

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.