Placing icons in text with the CSS content property

#1

With CSS we can use the content property to place text before or after what is displayed in a html tag.

<style>
[data-browser="Chrome"]::after {
  content: " ⚽";
  /* CSS styles here */
}
</style>
<div data-browser="Chrome" >
Something
</div>
  • This will place the ball icon after any html element that has an attribute “data-browser” with the value “Chrome”.
  • This works fine but I would prefer to use an “on brand” chrome icon such as an SVG and there is not such a symbol in Unicode.

Is there a way to insert an image here using the content property that will work within tiddlywiki?

1 Like
#2

Looking at this, image data types are supposed to work, though I haven’t tried it:

image
image760×111 9.47 KB

And reading further, you can do more with content image data type than I ever knew :blush:

image
image710×341 27.4 KB

The element() function is always intriguing.

#3

image
image1455×395 21.4 KB

Is it similar to this effect?

#4

The original question is focused on using content within css because I am specificaly trying to use it to target html using my arbitary html tag.

I will review the comments and leads in detail thanks.