Why is Kevin using ::after, instead of just using border bottom for a simple line under the element?
17 Replies
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
you could put border on that after element instead of using height π
oh! yes, that would work π
You have to use a pseudo element and center it in the div using top and translate
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"
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 π
I'm pretty sure the ::after is there for the strike through though
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 ...
40:40
maybe because he wants to animate it? and you cannot animate border bottoms?
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;
@iamtrazedBrothers 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
yeah you can just use border for that.
my guess would be he wanted more control as to where those lines appear
they both give equal control imo
border one is more maintainable to me
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
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
as i said it's just my guess i haven't watch whole video. it does look odd to use pseudo element for that