//How can I make the cursor blink? in this example i'm using a timer and in the debug mode I can //see the CursorCssClass changing but the the cursor does blink in the browser.

<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
    <div class="hero-container">
        <h1>test test</h1>
        <p>I'm tester <span style="@CursorCssClass">|</span></p>
    </div>
</section>
@code {

    private bool hideCursor = true;
    private System.Timers.Timer aTimer;
    private string CursorCssClass => hideCursor ? "opacity: 0" : "opacity: 1";

    private void ToggleCursor()
    {
        aTimer = new System.Timers.Timer();
        aTimer.Interval = 1000;
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }
    private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
    {
        hideCursor = !hideCursor;
    }
    protected override Task OnInitializedAsync()
    {
      ToggleCursor();
        return base.OnInitializedAsync();
    }
}