:before & :after

[00:00:00]
>> Jen Kramer: So, now comes the cool part, all right? So so far, we have information, we just can't read it all, yeah, super helpful, all right? This is the cool part. So what we're going to do here is, we're gonna come up with some labels. And the way I'm gonna structure these labels is as follows.

[00:00:20]
I'm going to say, first of all, td before, so before the td I'm gonna tell it the white space is a no wrap which we'll get around a little bug that a weird little space will show up if you don't have this in place. And I'm gonna make my font weight bold.

[00:00:43]
Okay, so that'll affect all of them and then what I'm gonna do is I'm gonna say td nth of type, and a number. Colon, double colon before.
>> Jen Kramer: Content, Description.
>> Jen Kramer: Slick, so the headers are back, okay?
>> Speaker 2: I think you need a dash in nth of type, after of.

[00:01:20]
>> Jen Kramer: Yes, that's why it didn't work. Thank you. And hyphen of hyphen type. There we go. So you can see here in the table, that now I have the word's description.
>> Jen Kramer: Helpful [LAUGH] Although that's not really the one we needed help with, right? Okay, so then we can just repeat this process, yeah?

[00:01:43]
Now we're hard-coding this here in our CSS, okay? This is one of those limitation kinda things, right? There's probably better ways of repeating this content so that you don't have to repeat yourself here, yeah? This is a good situation where you could pull in some JavaScript or you could pull in a backend programming language, whatever In order to write these out for you, okay?

[00:02:05]
Probably JavaScript's a better choice. Then we'll write all these out. But given that today is all about CSS, we'll just go ahead and write all of these out. So for the second one, we're gonna have to say "Weight: ".
>> Jen Kramer: For the third one, we're gonna have it say

[00:02:27]
>> Jen Kramer: Measure, notice I'm not putting in the units. Scientists, don't panic. The units will come back. We know how important they are. And 4 is going to be Vitamin C. And 5 is going to be vitamin K. Okay, so there we go. Check that out. Now you can actually read this?

[00:03:07]
Very nice. But as I mentioned, the units of measure are all missing aren't they? How could we add units of measure? Anyone want to make a suggestion?
>> Speaker 2: The after?
>> Jen Kramer: How about after? Nice, okay. So after, once again all those same caveats apply about there's a better way to do this than write it directly in CSS.

[00:03:27]
All that applies for after 2, so here we're going to say instead, and the numbers are 2 and after. And the content will be, in this case its gram, so its going to be, Space G. Okay, so this is for 2 and for 4. And that one was milligrams per measure.

[00:04:04]
>> Jen Kramer: And then five
>> Jen Kramer: Is micrograms per measure. Unfortunately, with the before and after properties, whatever is put in here is directly written to the web page. And so while we could probably come up with the beautiful little code to give us an actual micro, the Greek letter for micro, what will actually show up there is whatever that code is for micro.

[00:04:34]
Yeah it's not very pretty, so I'm fudging it here using a u instead. Okay, and that's the reason why I'm doing that. I wanted to take a quick moment and just show you a quick addition that we've made to our table example from CodePen based on feedback from somebody here in class.

[00:04:53]
So I mentioned that that micro symbol was pretty difficult to put it in. But we actually have a solution for that now. So first of all, over here in your HTML. If you'd like that micro symbol to appear. You can just use the HTML character equivalent thing of ampersand with micro and a semicolon on the end.

[00:05:17]
Don't put a space between the semicolon and the G. And it will show up as micrograms per measure down here on the bottom, which is exactly what you want. However, as I said, if you actually use that same ampersand micro semicolon in the before and after over here in the CSS that we had been talking about previously.

[00:05:38]
That exact text would show up, so &micro, which is not really what we want. So here, what we've done instead is use this equivalent, which is a front slash, the weird slash, the one you never use. That one, capital B, number 5, next to the G like that, and that will work as well.

[00:06:00]
And I can just go ahead and show you that. Real quick, so if we go to full page view here and I shrink the screen down, you'll see that there it is 0.7 micrograms per measure, okay? So that's a really nice tip to get around that particular problem and I've updated the Codepens to reflect that.