Why is Kevin using ::after, instead of just using border bottom for a simple line under the element?

No description
17 Replies
Jochem
Jochemā€¢14mo ago
I don't think you can reasonably achieve that strike through effect with a border and even if you could, there's more than one way to solve a problem, and this is just one of them
Mannix
Mannixā€¢14mo ago
you could put border on that after element instead of using height šŸ˜„
Jochem
Jochemā€¢14mo ago
oh! yes, that would work šŸ˜…
snxxwyy
snxxwyyā€¢14mo ago
You have to use a pseudo element and center it in the div using top and translate
Jochem
Jochemā€¢14mo ago
what I meant was that you can't achieve it with a border on the element itself because of "Why is Kevin using ::after, instead"
Harun
Harunā€¢14mo ago
I am not talking about a strike through effect, he wants to put a simple line in the bottom of the elements and I was confused to why he is writing 7-8lines of code to achieve that, when you can do it with border-bottom: 1px solid black; That's why I asked is there something I don't get, because I am a beginner sorry for the confusion šŸ˜„
Jochem
Jochemā€¢14mo ago
I'm pretty sure the ::after is there for the strike through though
Harun
Harunā€¢14mo ago
Kevin Powell
YouTube
Creating a better todo app - the HTML and CSS
Watch part 2 where Kyle adds the JavaScript to make this work over on Web Dev Simplified: https://youtu.be/W7FaYfuwu70 In this video, I create the structure of a todo app, including setting up custom checkboxes, creating some fun little transitions, different use cases for custom properties, and setting it up using both grid and flexbox. Find ...
Harun
Harunā€¢14mo ago
40:40 maybe because he wants to animate it? and you cannot animate border bottoms?
snxxwyy
snxxwyyā€¢14mo ago
he used ::after for the strike through because you can't position a regular border in the center. if you want to underline a text element use text-decoration: underline;, if you want to underline another element then yes use border: 1px solid colorhere; @iamtrazed
Harun
Harunā€¢14mo ago
Brothers just watch the video at 40:40 he does a second ::after for the strikethrough at around 50:00 the first one at 40:40 is for the bottom line
snxxwyy
snxxwyyā€¢14mo ago
yeah you can just use border for that.
Mannix
Mannixā€¢14mo ago
my guess would be he wanted more control as to where those lines appear
snxxwyy
snxxwyyā€¢14mo ago
they both give equal control imo border one is more maintainable to me
Mannix
Mannixā€¢14mo ago
no you can't move border as freelly as that element lol also op you missled us with that screenshot you posted šŸ˜„ you should have posted the final result of that
snxxwyy
snxxwyyā€¢14mo ago
For that purpose though Iā€™d say, if I wanted to move it Iā€™d just add and remove margin block to the element etc
Mannix
Mannixā€¢14mo ago
as i said it's just my guess i haven't watch whole video. it does look odd to use pseudo element for that
Want results from more Discord servers?
Add your server