Write text below a specific part of a sentence

Maybe you could find the x/y-position of the span with Javascript and position another div with an increased y-position? I don’t think there will be an out-of-the box css solution to this problem.

Here is a quick example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        p {font-size: 16px}
        .underline {text-decoration: underline}
        .below_underline {position: absolute; font-weight: bold; font-size: 12px; display: inline-block; text-align: center}
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){       
        $('.underline').each(function(){
            var position = $(this).position();
            var newElement="<span class="below_underline">what if we remove this?</span>";
            $(newElement).css('left', position.left).css('top', position.top + 20).css('width', $(this).width() ).appendTo(this);
        });
    }); 
    </script>
</head>
<body>
<p>The quick <span class="underline">brown fox jumps over the</span> lazy dog.
</body>
</html>

It has some flaws, like if the text does not fit on one line etc. etc. but this should give you a good start.

Related Posts: