Stylus script: highlight links and display title, aria-label or aria-labelledby indications

links-infos.css

/* ==UserStyle==
@name           Highlight links and some indications
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Links are highlighted with their title and aria-label/labelledby attributes
@author         Philippe Vayssière
==/UserStyle== */

/*
  TODO: counting links (with title, aria-label and aria-labelledby)
  TODO: empty links in error
  TODO: should ignore empty aria-label***
*/

:root {
  --white: white;
  --link: green;
  --title: darkslateblue;
  --c-link: var(--white);
  --bg-link: var(--link);
  --bg-title: var(--title);
  --bd-link: var(--link);
}

/* Accessible name if due to ARIA */
a:where([aria-label], [aria-labelledby]) {
  --prefix: "Acc. name: ";
}

/* TODO: when aria-la*** exists but it's value is empty, aka ="" */
a[aria-label] {
  --n: var(--prefix) attr(aria-label) !important;
}

a[aria-labelledby]:not([aria-label]) {
  --n: var(--prefix) "see aria-labelledby=\"" attr(aria-labelledby) "\"";
}

a[aria-label]::before {
  content: var(--n);
  position: relative;
  background-color: var(--bg-link);
}

a[title] {
  position: relative;
}

a[title]::after {
  content: " 💬 " attr(title);
  position: absolute;
  top: calc(100% - 5px);
  left: -5px;
  width: fit-content;
  white-space: pre;
  background-color: var(--bg-title);
  opacity: 1/*0.7;*/
}

/* Styles */
a:where([aria-label], [aria-labelledby])::before,
a[title]::after {
  z-index: 123456;
  display: block;
  line-height: 1.5;
  color: var(--c-link);
}

/* Highlight all links */
a {
  border: 5px solid var(--bd-link);
}