How do I type a dot(.) on top of an alphabet in HTML?

Question

A dot on top of an variable means its derivative with time. I want to type this in a HTML page. How do I do that??

PS-essentially the equivalent of \dot{x} in latex.

Answer 1

Although this question is years old, I did not find a solution without external libraries. So, here is one. I created a Razor component, but of course you can avoid this by copying its content to your HTML and replace @ChildContent by the letter(s) you need the dot above.

DottedLetter.razor

<span class="d-inline-flex justify-content-center dot-wrapper">
    @ChildContent
</span>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

DottedLetter.razor.css

.dot-wrapper {
    position: relative;
    width: fit-content;
}

    .dot-wrapper::after {
        position: absolute;
        bottom: 50%;
        content: '\2024'
    }

Usage in HTML

<DottedLetter>Q</DottedLetter>

Note, there are many dotted letters available, see here, but e. g. not <DottedLetter>Q</DottedLetter>.