Adding CSS class to anchor link in markdown (Hugo)

Question

I'm using anchor links in my .markdown document like so:

# {#infrared}

This works fine but I wanted to implement the following CSS so that the link scrolls to the middle of the page and not at the top:

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

How can I add the class anchor to my anchor link in the markdown document?

user_4112751 · Answer

Based on this answer here, we have:

As per the README 1 of Goldmark the Markdown processor that is currently turned on by default in Hugo:

Currently only headings support attributes…

## heading ## {#id .className attrName=attrValue class="class1 class2"}
 
## heading {#id .className attrName=attrValue class="class1 class2"}

user_11412828 · Answer

I think overall markdown supports html tags for example you should be able to use

text...

but either way if It wont really work you have few other options. For example "Fenced Code Attributes":

```{.red .numberLines startFrom="1"}
Here is a paragraph.

And another.
```