0

I have a CSS rule that adds a Bootstrap Icons icon as a background image to the end of any <a> element that has the target="_blank" attribute.

This is my CSS rule:

a[target="_blank"]:not(.no-ext-icon) {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-up-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/></svg>") center right no-repeat;
  padding-right: 1.375rem;
}
<p><a href="#" target="_blank">link</a></p>

This works, but it does not inherit the <a> element's text color, the icon is always black.

I know that I could replace the fill='currentColor' value inside the <svg> element, but then I would have to create multiple CSS rules to cover all possible text colors on my website.

Is there any way to make the icon automatically inherit the <a> element's text color?

chrwahl
  • 8,675
  • 2
  • 20
  • 30
af86
  • 11
  • 3
  • @ksav No, unfortunately not. It is a slight improvement because I can use SCSS to set the icon's color, but my goal is to have the icon automatically inherit the text element's color. – af86 Oct 06 '21 at 09:17
  • I don't think its possible https://stackoverflow.com/a/7361787/5385381 – ksav Oct 06 '21 at 09:20

0 Answers0