From the course: Design the Web: Creating a Sortable Table

Unlock this course with a free trial

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

Creating CSS triangles to indicate sort order

Creating CSS triangles to indicate sort order

From the course: Design the Web: Creating a Sortable Table

Start my 1-month free trial Buy for my team

Creating CSS triangles to indicate sort order

“

- [Voiceover] Now that we're highlighting the table cell that represents the column that the table's being sorted against, now what we're going to do is create some arrows with CSS to indicate the direction of the sort, whether the sort is in an ascending or descending order. Now we already have the classes being injected, so let's go back to our CSS file and add in some additional rules. And now to add the object for the triangle, I don't want to go back to the HTML and add in some additional HTML markup. So we're going to use the CSS pseudo element to inject an object and then create our triangles using some border properties. So in our CSS file, let's hit a few Returns. I want to create these new rules or pseudo element into the th.sorted after this rule here. So let's come up here and copy this entire rule. After this, let's paste this again. Now what we want to do is add this pseudo element to the th.sorted, so we'll type two colons, then the word after, then a space, then put in…

Contents