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
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
kouki @ pokemon hype Nov 3
Replying to @wesbos
The heck is that font style for your comments and pseudo elements? Extension?
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
Wes Bos Nov 3
Replying to @SelenIT2
Ohh yah you are right!
Reply Retweet Like
Jarno Nov 3
Replying to @wesbos
Just curious, why not ::before and ::after?
Reply Retweet Like
Wes Bos Nov 3
Replying to @Jarno
¯\_(ツ)_/¯
Reply Retweet Like
Wes Bos Nov 3
Replying to @smlpth @stolinski
He pays me $1 per 🔥
Reply Retweet Like
Kriss Watt Nov 3
Nice technique. Quick segue: what's the editor color theme you're using there?
Reply Retweet Like