I defined the following data-* attribute for a span

[data-note] {
  position        : relative;
  display         : inline-block;
  margin-bottom   : 1.5em;
  text-decoration : underline;
}

[data-note]::after {
  position   : absolute;
  width      : 100%;
  left       : 0;
  font-size  : .75em;
  text-align : center;
  content    : attr(data-note);
  top        : 80%;
}

which I use in the following way

The word <span data-note="is possible?">"everything"</span> has a text below it.

to obtain

I would like to be able to put also html codes inside the data-note, for example

The product <span data-note="2<sup>3</sup>">2 * 2 * 2</span> can be written as power.

but unfortunately the content property of a pseudoelement can't render html, that is the value given to data-note is treated literally and it is not interpreted.

Is it possibile to define a shortcode, such as

function test_sc( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'note' => '',
    ), $atts );
        /* do something to render the 'note' attribute */
        return "<span data-note='{$a['note']}'>" . $content . "</span>";
}
add_shortcode( 'test', 'test_sc' );

which could be used in this way

The product [test note="2<sup>3</sup>"]2 * 2 * 2[/test] can be written as power.

and such that it renders the note html code before passing it to the span element?

I tried with

add_shortcode( 'test', 'test_sc' );
function test_sc( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'node' => '',
    ), $atts );
        remove_filter( 'the_content', 'wpautop' );
        $content = apply_filters( 'the_content', "<span data-note='{$a['node']}'>" . $content . "</span>" );
        add_filter( 'the_content', 'wpautop' );
        return $content;
}

but it doesn't work.