htmlcssquarto

How to apply custom list styles only to specific lists?

I'm knitting a Quarto document that includes a .css styling file and getting the bullet along with line feeds in my table of contents and my references. The bulleted lists appear correct. It has something to do with the .css file I'm using.

My company's style includes a red slash for bulleted lists, which is what I'm going for. I don't want it in the TOC nor the references. How do I make the bullets in the TOC and references go away, as well as the line feed?:

enter image description here

Here is my code:

---
title: "Line Feed No Bueno"
execute:
  echo: false
  warning: false
format: 
  html:
    css: mystyle.css
    toc: true
---

```{r}
library(knitr)
library(rmarkdown)
```

* List item A
* List item B


# References
This document was generated using the R[^1] software environment and employs rmarkdown[^2] for formatting.

[^1]: R Core Team (2024). _R: A Language and Environment for Statistical Computing_. R Foundation for Statistical Computing, Vienna, Austria. URL <https://www.R-project.org/>.

[^2]: JJ Allaire, et al (2024). _rmarkdown: Dynamic Documents for R_. R package version 2.27. <https://github.com/rstudio/rmarkdown>.

and here is my mystyle.css file...

ul {
  list-style: none; /* Remove list bullets */
  padding: 0;
  margin: 0;
  padding-bottom: 0px;
  font-size: 11pt;
  font-family: 'Aktiv Grotesk';
}

li {
  padding-left: 0px;
  padding-bottom: 0px; 
  padding-top: 0px;
  font-size: 11pt;
  font-family: 'Aktiv Grotesk';
}

li::before {
  content: "/"; /* Insert content that looks like bullets */
  padding-right: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: red; /* Or a color you prefer */
}
Solution

  • The li::before selector targets too many elements within your document. You could wrap your list with custom bullets inside a div with a dedicated class, e.g.

    ::: {.myList}
* List item A
* List item B
:::

    and within the css you only apply the style on children of this class:

    .myList > ul > li::before {
  /* styles */
}

    enter image description here

    Complete example:

    quarto.qmd

    ---
title: "Line Feed No Bueno"
execute:
  echo: false
  warning: false
format: 
  html:
    css: mystyle.css
    toc: true
---

```{r}
library(knitr)
library(rmarkdown)
```

::: {.myList}
* List item A
* List item B
:::

# References
This document was generated using the R[^1] software environment and employs rmarkdown[^2] for formatting.

[^1]: R Core Team (2024). _R: A Language and Environment for Statistical Computing_. R Foundation for Statistical Computing, Vienna, Austria. URL <https://www.R-project.org/>.

[^2]: JJ Allaire, et al (2024). _rmarkdown: Dynamic Documents for R_. R package version 2.27. <https://github.com/rstudio/rmarkdown>.

    mystyle.css

    ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
    padding-bottom: 0px;
    font-size: 11pt;
    font-family: 'Aktiv Grotesk';
  }
  
  li {
    padding-left: 0px;
    padding-bottom: 0px; 
    padding-top: 0px;
    font-size: 11pt;
    font-family: 'Aktiv Grotesk';
  }
  
  .myList > ul > li::before {
    content: "/"; /* Insert content that looks like bullets */
    padding-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: red; /* Or a color you prefer */
  }