Meta Post - Common CSS Hacks

Share & showcase
350

Use a :after pseudo-element:

a.tag {
  position: relative;
  padding-left: 3px;
}

a.tag:after {
  background:  var(--text-accent);
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 0.8em;
  left: 0px;
  /* if you have pill-style tags */
  background-clip: padding-box;
  border-top-left-radius: 250px;
  border-bottom-left-radius: 250px;
}

/* if you have custom tag colors */
.tag[href^="#elixir"]:after {
  background: rgb(142, 88, 203) !important;
}

.tag[href^="#phoenix"]:after {
  background: #F67938 !important;
}

You may have to fiddle with the left:, width: and padding-left: values to fit your font and other a.tag styles. Sticking with an em value for width will help make it work when you zoom in/out.

1 Like