From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding content with pseudo-elements

Adding content with pseudo-elements - CSS Tutorial

From the course: Creating a Responsive Web Design

Adding content with pseudo-elements

- So now we're going to finish styling elements inside of the block quote. And what I want to do is I want to add a large set of quote marks here I want to add a quote to the end of the quote and we want to add an m dash. So if we review the original design this is what we want to have happen. But just like before I don't want to add anything to the html if I don't have to. So I want to add this additional content into the page using css pseudo elements. This will give us the ability to add content so the user can see it, but again not change anything about the html. So to add these pseudo elements let's go back to our css let's scroll down, we're still working in the section how to So I add a few more lines here. Let's come up and copy the section how to block quote rule name. Let's paste that down here. Then we'll add two colons. Then we'll type in before. So now we'll add this phantom html element or the pseudo element as the first item inside of the block quote. So then inside of…

Contents