How to add a chapter description to a course overview page

Ever wish you could add a little description of the chapter in your Squarespace course? Well, I've cracked the code (literally!) and I'm excited to share it with you! In this tutorial video, I'll walk you through how to add custom excerpts to your chapter titles using a little bit of custom CSS.

You’ll find the codes you need underneath this video, but there are many aspects that you’ll need to change to make this work for your own unique website. Please watch the tutorial video before adding these codes to your website to avoid any code mistakes.

// Hide lesson timestamp
.course-list__grid-course-item-lesson-meta time, .course-list__chapter-duration, .course-list__grid-chapter-item-chapter-meta{
display:none
}
// Give the chapter section a background
.course-list__grid .course-list__grid-chapter-item{
background:#e5f5f6;
border-radius:10px;
padding:20px
}
// Style the excerpt & add the text for the first chapter 
.course-list__grid .course-list__grid-chapter-item-header{
border-bottom:none
} 
.course-list__grid-chapter-item
.course-list__grid-chapter-item-chapter-name:after{
  content:"\A Describe the first chapter with a sentence or two";
  white-space:pre;
  font-size:1rem;
  font-weight:300!important;
  line-height:1rem
}
// Change the text for the second chapter
.course-list__grid-chapter-item:nth-of-type(2) .course-list__grid-chapter-item-chapter-name:after{
  content:"\A Describe the second chapter with a sentence or two"
}
// Change the text for the third chapter
.course-list__grid-chapter-item:nth-of-type(3) .course-list__grid-chapter-item-chapter-name:after{
  content:"\A Describe the third chapter with a sentence or two"
}