Frontmatter HTML div block and css class for first and second dashes

Use case or problem

For the moment, styling the front matter (mainly in LP) is pretty difficult because we can style each block or the block in this entirety. Also, we can style the first --- and the last ---

Proposed solution

  • A html div block that include the front matter, starting from --- and ending with the second ---.
  • A css class for the first --- and the last ---

This will allow, for example, to :

  • Create border, background color
  • Add things before or after (icons)
  • Display the entire frontmatter on hover (not line by line) / active line, eventually create “click to open” with css or plugin ?

Current workaround (optional)

Fight with CSS and all the tag to style the frontmatter.

Related feature requests (optional)