Unnecessarily broad style rule on `a:before` produces unwanted side-effects

[bheberlein]

I notice that in pydata-sphinx-theme.css (v0.12.0), we have this style rule:

a:before{
    color:var(--pst-color-text-muted);
    font-family:Font Awesome\ 6 Brands;
    margin-right:.25rem
}

This selector seems much too general, and produces unwanted side-effects. For example, if I create footnote citations with ReST like so:

This model derives from the work of Smith\ [#Smith2023]_.

|

.. rubric:: Footnotes

.. [#Smith2023] Smith J (2023). Citation goes here.

...then the opening bracket (both in the main body and in the footnotes) will be rendered in a different font and color than the citation number and closing bracket; it also has the odd right margin that makes the whole bracketed reference asymmetrical:

The opening bracket also does not inherit styles associated with hovering the cursor over the link (though this seems to be a separate issue).

Of course I can add custom CSS to style these elements properly:

a.fn-backref:before, a.footnote-reference.brackets:before {
  color: var(--pst-color-link);
  font-family: var(--pst-font-family-base-system);
  margin-right: 0;
}

But this seems like a band-aid fix, rather than a solution to the underlying problem.

I am sure there is a particular case for which the style rule was written. Does anyone know what that is? I propose we can add additional selectors to the rule so that it does not have such unwanted side-effects.

[bheberlein]

Looks like this is related to GitHub & GitLab link shortening. It seems like the offending rule is in assets/styles/base/_base.scss lines 63-68:

a {
  // set up a icon next to the shorten links from github and gitlab
  &::before {
    color: var(--pst-color-text-muted);
    font-family: "Font Awesome 6 Brands";
    margin-right: 0.25rem;
  }
}

I think it is better to do this instead:

a {
  .github, .gitlab {
    // set up a icon next to the shorten links from github and gitlab
    &::before {
      color: var(--pst-color-text-muted);
      font-family: "Font Awesome 6 Brands";
      margin-right: 0.25rem;
    }
  }
}

[12rambau]

yes you are right thank you for finding out, please open an PR and we'll see how it renders in the test doc.