I would like to achieve this result for Reddit, Youtube and Github links:
I would like that the logo is added automatically after the link. Is it possible?
It would help me a lot in understanding the content at first glance.
This solution uses JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Images to Links</title>
<style>
a img {
border: 2px solid blue;
padding: 5px;
border-radius: 10px;
background-color: #3d332d;
width: 150px;
}
</style>
</head>
<body>
<a href="https://obsidian.md">Visit Example</a>
<script>
// JavaScript to add an image to the link
const link = document.querySelector('a[href="https://obsidian.md"]');
const img = document.createElement('img');
img.src = 'https://forum.obsidian.md/uploads/default/original/3X/e/5/e5cee4f899883022e48b8b71843a4c543ecd23aa.svg';
img.alt = 'Example Image';
link.appendChild(img);
</script>
</body>
</html>
You could also try something like this:
a[href*="//www.youtube.com"] {
--link-external-color: red;
--link-external-decoration: none;
}
a[href*="//www.youtube.com"]::after {
content: "";
display: inline-block;
width: 1.5em;
height: 1em;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom left;
}
a[href*="//www.youtube.com"]::after {
background-image: url('https://www.youtube.com/s/desktop/7e8b1d69/img/favicon.ico');
transform: translateX(0.1em);
}
※ This will only work in Reading view or rendered contexts
Thank you so much for your help. Unfortunately both solutions only work in reading view which I rarely use. After spending a whole day trying I haven’t been able to find any way to target the link names in editing view. At this point I’m giving up.
Using this method I was able to achieve a very clean result, I guess I’ll have to remember to switch into Reading view 
I have one more question, I am sorry if I created many posts but I don’t see the option to edit previous posts to make only a single one.
Is it possible to add in background-image a local image? I tried every possible combination with relative and absolute paths but the image is not shown. Example: background-image: url('myimage.png')
You can’t refer to local files in Obsidian’s CSS.
If you want to use a local image, you need to embed it as base64 in the CSS. e.g.,
background-image: url("data:image/webp;base64,<embeded image text>")
The link is for theme devs, but more info here:
https://docs.obsidian.md/Themes/App+themes/Embed+fonts+and+images+in+your+theme
Once you make a few more forum posts, give and get some likes, etc., you’ll be able to edit your posts. It’s a default forum setting for new and new-ish users.
