Twitter | Search | |
Wes Bos πŸ”₯
πŸ”₯ Since :before and :after are first class CSS Grid items, this β€œlines on either side” design can easily be accomplished in ~10 lines of CSS
Reply Retweet Like More
Wes Bos πŸ”₯ Nov 3
Replying to @wesbos
The best part of using :before and :after is that there is no extra markup needed, just regular β€˜ol heading elements will do
Reply Retweet Like
SelenIT Nov 3
Replying to @wesbos
They work almost the same (maybe even with less code) in Flexbox, don't they?
Reply Retweet Like
Brant Barton Nov 3
Replying to @wesbos
Are you putting together a grid course?
Reply Retweet Like
Scott Tolinski Nov 3
Replying to @wesbos
πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯
Reply Retweet Like
Sven Wolfermann Nov 3
Replying to @wesbos
Works with flexbox too
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @SelenIT2
Very similar - with flexbox you’d need to wrap the word in a span I think since you can’t target the words w/o an element
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @brrrant_b
Yep!
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @maddesigns
Yep!
Reply Retweet Like
tormin Nov 3
Replying to @wesbos
The heck is that font style for your comments and pseudo elements? Extension?
Reply Retweet Like
Brant Barton Nov 3
Replying to @wesbos
Looking forward to it!
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @lntormin
I wrote a bit of info here β†’
Reply Retweet Like
Paul unr Morrison Nov 3
Replying to @wesbos
All this grid stuff is standard in current browsers huh? Impressive. I need to sit down and learn if so
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @iamunr
Pretty much - there are a few mobile browsers that may or may not be a large portion of your audience
Reply Retweet Like
Clifton McGilvray Nov 3
Replying to @wesbos
would you be willing to codepen this?
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @OMGDrAcula
Reply Retweet Like
SelenIT Nov 3
Replying to @wesbos
I see no need to wrap it. Just set flex:1 to the pseudo elements. They are first class flex items, too
Reply Retweet Like
Robin Malfait Nov 3
Replying to @wesbos
Also works nicely in flexbox
Reply Retweet Like
Wes Bos πŸ”₯ Nov 3
Replying to @SelenIT2
Ohh yah you are right!
Reply Retweet Like
Clifton McGilvray Nov 3
Replying to @wesbos
Thanks so much!
Reply Retweet Like