Can someone help me underline section headings with a custom squiggle line?

Does anyone know if I can change the horizontal line block to a squiggle line I've drawn, or how I can underline headings with this squiggle (this would be ideal)? & if so, how this can be done? Thanks!

Hello Megan,

There are a couple of ways to do this. First, you'll need to identify which "blocks" you want the squiggly line to be added to by using a block identifier extension for Chrome or Mozilla.

Then you need to prepare the image/file for the squiggly line you intend to upload. I'd recommend using an SVG format for this. It will provide high-res graphics across different sizes and hopefully minimal scaling issues. Hence the name, "Scalable Vector Graphics" format. 

Once you have the file formatted, uploaded, and heading blocks identified. Use the following code and adjust accordingly. The original code is here, so try to tweak these setting like Height, Position, Size,..etc and if you mess up, just re-paste this code with your ID and URL and try again. You'll need to apply this code for each block by swapping the Block ID for each squiggly. Applying this code without the ID means all of the H1 elements will have the squiggly underline, including your site title and such!

#YOUR_BLOCK_ID {
  h1 {
    height: 150px;
  background-image: url("https://YOUR_URL_HERE_.svg");
  background-position: 0 .99em;
  background-size: 25px;
    background-repeat: repeat-x;
  }
}

Hope this helps,

-Dan