Fix <sup><a> from getting wrapped with [ ]

[simurai]

What are you trying to accomplish?

This fixeshttps://github.com/github/primer/issues/677.

Before	After

Currently when adding

Hi, <sup><a href="#">world</a></sup>

to a comment, the link is wrapped with [ ]: Hi, ^world

What approach did you choose and why?

Replace the loosely scoped styles for footnotes:

css/src/markdown/markdown-body.scss

Lines 97 to 103 in 670149d

	sup > a::before {
	content: '[';
	}
	sup > a::after {
	content: ']';
	}

with:

 [data-footnote-ref] {
&::before {
content: '[';
}
&::after {
content: ']';
}
}

What should reviewers focus on?

Diff is best viewed with "whitespace hidden".

Are additional changes needed?

• No, this PR should be ok to ship as is. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: a64ca0d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jonrohan]

👏🏻