Replace the titles of the interests on your profile

As sharing layouts is "temporarily unavailable", I'll just share the code as a blog entry.

How does this work? This makes the original text have completely 0% of its size, then adding text next to it with a specified size (0.75rem seems close to the original).

<style>
  :root {
    --interest1: "General";
    --interest2: "Music";
    --interest3: "Movies";
    --interest4: "Television";
    --interest5: "Books";
    --interest6: "Heroes";
    --font-size: .75rem;
  }

  .table-section:not(:last-child) .details-table tr td:first-child p {
    font-size: 0;
  }
 
  .table-section:not(:last-child) .details-table tr td:first-child p::after {
    font-size: var(--font-size);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
    content: var(--interest1);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
    content: var(--interest2);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
    content: var(--interest3);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
    content: var(--interest4);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
    content: var(--interest5);
  }

  .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
    content: var(--interest6);
  }
</style>