How do I add line after slide title <h2>

[Mutaz94]

Description

Hi All,

Probably this is a naive question but I want to add line after h2 header in revealjs for all slides. I tried this

.reveal section h2::after {
  content: ""!important;
  display: block!important; 
  padding: 5px!important; 
  height: 3px!important; 
  color: $body-color!important; 
 }

But unfortunately, I couldn't get that working. Any ideas?

[mcanouil]

Note that this is a nearly 100 % HTML question which are more appropriate elsewhere. 😉

This being said, your class has absolutely no content, thus nothing to be displayed.
See the below working example:

---
title: "Quarto Playground"
format: revealjs
css: theme.css
---

## Quarto Playground slide

This is a playground for Quarto.

h2::after {
  content: "";
  display: block;
  margin-top: 0.5em;
  border-bottom: 1px solid black;
}

Also, you should not used !important lightly.

In CSS, !important is a keyword that is used to give a CSS property more weight than it would normally have. When a property is marked as !important, it will override any other declarations of that property that come later in the CSS cascade, regardless of their specificity. It is generally recommended to use !important sparingly, as it can make it difficult to maintain and update your CSS code.

[Mutaz94]

This is really helpful! Thank you so much!!!

[mcanouil]

Yes, it also works in SCSS because it's CSS.

See https://developer.mozilla.org/en-US/docs/Web/CSS/important.