hey tried some css to find a way and this kind of works but little tricky to edit though as selecting the text with mouse will act weird.
But could use keyboard
any way better than nothing 
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink:not(.cm-formatting) {
font-size: 0;
}
not active line 
when line active
Hope this helps for the time being
put it in css snippet and activate
Improved CSS is here
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;
}div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink::after {
content: '⚓';
font-size: 0.7rem;
opacity: 50%;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting.cm-formatting-link.cm-link.cm-hmd-barelink {
display:none;
}
line not active
line active
NOW ITS BETTER 
try this too ; much more clean 
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting.cm-formatting-link.cm-link.cm-hmd-barelink {
display:none;
}
.cm-hmd-barelink {
font-size:0.9rem;
vertical-align: super;
}
Note active line
Active line
work like charm along with better footnotes
Thanks @ananthuthilakan! I have not messed with CSS in Obsidian so far. Your snippet is going in the direction I was imagining. The problem for me is that I am using footnotes mainly for hyperlinks which are not really usable when using your snippet. If you happen to know some way of modifying it so that hyperlinks are clickable, that would be awesome 
At the present moment, it seems that footnotes are not working as it should in Live Preview. Using Footnote Shortcut plugin + Better Footnote doesn’t improve usage of this feature (The footnotes list doesn’t appear separately at the end of the note). The elements [^1] or ^[ ] are not hiding itself as we type. In the end, if I type manually, footnotes will work, but it still shows [^1], not [1] (in the text) like in Preview Mode.
Any thoughts?
Following the post on the live preview formatting of external links in footnotes, it would be nice to have a proper support for footnotes in the live preview.
Links are not parsed in footnotes, appear highlighted wrong and are not clickable in either live preview or source mode. They work as expected in reading view.
Here’s the example code.
a [^1] b
[^1]: [hint](https://example.org)
No, it doesn’t.
text^[footnote text]
text^[footnote [[cool link]] text]
The entire footnote should be highlighted (blue in my theme) and the link should be underlined and clickable (when holding ctrl). for this screenshot I just removed the actual link brackets
Here you can see the internal link shows the opening brackets, but not the closing brackets and after the link the footnote stops being highlighted.
RECOMMENDATIONS:
Custom theme: for cosmetic issues, please try to make the issue happen in the help vault or disable community theme and snippets.
Community plugins: for bugs, please try to make the issue happen in the help vault or disable community plugins.
Haven’t tested with manual footnotes inserted at the bottom, I barely use them because they’re a bit inconvenient.
It’s important to note that this is just an issue in the live preview, rendering the thing readonly in reading mode correctly highlights the link and takes the entire thing as footnote.
This issue also occurs with the default obsidian theme, not just my custom community one and I highly doubt any of the plugins interfere here.
@tobi I have exactly the same problem and would support the feature request.
For me none of the proposed solutions worked so I also made a quick CSS snippet. Maybe it helps.
/* F O O T N O T E S */
/* beginning and end of footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end {
opacity: 0.5;
}
/* styling the footnote footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end,
.cm-inline-footnote {
color: #e88500;
font-size: 60%;
position: relative;
top: -4px;
}
Result:
It seems to work only if I separate the footnote from the text with a space character though.
This doesn’t work.^[footnote]
This works. ^[footnote]
Hope it helps 
@litotitus thank you so much for this answer. Trying to make my own custom-css I was very puzzled, why in the HTML my footnotes appeared with a .cm-hmd-barelink.cm-link class (i.e. [...]) instead of a .cm-inline-footnote class.
Your comment solved this. However, I guess this blank space workaround needs to be considered a bug in live-preview, right? I mean it’s quite counter intuitive to use a blank space before a footnote, and in reading mode it gets correctly interpreted without it.
Oh, and regarding the feature request…
… personally I’d actually prefer, if the footnotes stayed inline also in live-preview. The reason is, that this helps me keeping the overview also of the content of all my footnotes. In the process of writing down a paragraph with multiple footnotes, jumping back and forth distracts me from writing (even with hyperlinks that work both ways!).
… however, I can also understand the benefits of the requested styling of the footnotes to be appended at the bottom. I think it very much depends on personal workflow and on the context. So once the paragraph has settled, I’d actually prefer to have the footnotes down there at the bottom of the document, too!
So what I suggest is a command to toggle between both views. And this being said: No! Switching between live-preview and reading mode is not an option for me, since it is about writing in both of the described workflows. So I would strongly opt for having both views accessible in live-preview. This would be awsome!
@lab another advantage of inline footnotes is that if you need to excise part of a note and paste it into another note, you don’t have to go scouting to the bottom of the original note to locate the right footnote and risking a excising the wrong footnote.
I’d like to come back to the bug-report of @Chairmander, which is still unresolved for Live-Preview.
Issue: If cm-links are used within footnotes, they are not rendered correctly in Live-Preview. For me this is a big issue since I have many footnotes with Pandoc-Citations inside.
Partial workaround: With css-snippets it is possible to partially work around the issue like this (however, there is no chance to edit the second citation, since it is rendered with the same class as the neighboring text).
Here’s the css-snippet (based on @litotitus 's answer)
/* F O O T N O T E S */
/* beginning and end of footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end {
opacity: 0.5;
}
/* styling the footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end,
.cm-inline-footnote{
color: #92926d;
font-size: 75%;
}
/* workaround for Pandoc-references in footnotes */
.cm-formatting.cm-formatting-link.cm-link {
opacity: 0.5;
}
.cm-link:not(.cm-hmd-barelink) {
color: #92926d !important;
font-size: 75%;
}
.cm-inline-footnote.cm-link {
color: #D08770 !important;
}
As others, I note that footnotes do not work as documented when in Live Preview.
(*Just commenting to this thread to add another vote to underscore that this is a meaningful nuisance.)
Should the CSS provided in this post also alter the appearance of Markdown links? Right now, any link in the form of [alias](underlying link) is appearing with the modified size/color/etc. that I would like to have applicable only to inline footnotes.
The plugin footnote pop Hover work great on preview (only for desktop). I will love to see something some for footnote. More over, the plugin reference success to create pop-over so i think it can be possible to port this plugin to live preview.
Sorry for the late answer.
You are right @julroger2013: Unfortunately I did not find a work around that doesn’t also affect the markdown links. As suggested, there should be some additional css-classes provided – either by a plugin that does some own syntax-interpretation (I guess, this is what the better footnote is doing?! @Mara-Li), or built-in. The latter, by far, would be the preferred solution.
The reason why I posted the above tweak is that I used it to write an academic paper, where I knew, I’ll only have footnotes and no links. So it helped me a lot to get at least some of the footnote-formatting right. However, for regular Zettelkasten workflow I turn the snippet off – for the precise reason you are describing.
Seconding this!