customize solution environment

Question

I'm trying to automate the insertion of horizontal rules at the end of solution environments in Quarto; for example:

---
title: "Untitled"
---

:::{#exr-oneplusone}
What is 1+1?

::::{.solution}
$$1+1 = 2$$

******

::::



:::

I'm trying to insert

******

at the end of every .solution environment, or maybe the exercise environment.

From https://bookdown.org/yihui/bookdown/markdown-extensions-by-bookdown.html#theorems, it seems like there's a way to customize the solution environment using CSS. I'm just not sure what the syntax is for the CSS file. Thanks for any guidance!

Answer 1

Here a way: The CSS margin properties are used to create space below and the border mirrors a horizontal line,

---
title: "Untitled"
---

<style>
.solution{
    margin: 3px 0px; 
    border-bottom: 0.9px solid black;
}
</style>

:::{#exr-oneplusone}
What is 1+1?

::::{.solution}
$$1+1 = 2$$

::::
:::