Write text below a specific part of a sentence

  • I’m looking for to obtain this effect

    https://i.stack.imgur.com/04i5T.png

    that is to place a bracket under a piece of text and then to write text below the said bracket. Is it possible to obtain such an effect using HTML and CSS?

    A rude bracket can be obtained by adding a bottom-border to the selected text, such as

    The quick <span style="bottom-border: 1px solid">brown fox jumps over the</span> lazy dog.

    But is it possibile to add text below the border?

    • This topic was modified 5 years, 3 months ago by giannit.
    • This topic was modified 5 years, 3 months ago by giannit.
    • This topic was modified 5 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Developing with WordPress topic
Viewing 1 replies (of 1 total)
  • Thread Starter giannit

    (@giannit)

    This seems to work very good, testing it

    [data-annotation] {
  position    : relative;
  white-space : nowrap;
  display: inline-block;
  margin-bottom: 2em;
}

[data-annotation]::before,
[data-annotation]::after {
  position : absolute;
  z-index  : 1;  
  width  : 100%;
  opacity: .5;
}

[data-annotation]::before {
  top    : calc(100% + 2px);
  height : 5px;
  border : 1px currentcolor solid;
  border-top : 0;
  content: "";
}

[data-annotation]::after {
  content    : attr(data-annotation);
  left       : 0;
  font-size  : .75em;
  text-align : center;
  top        : calc(100% + 10px);
}

    for example

    The quick brown <span data-annotation="What if we remove this?">fox jumps over the lazy</span> dog.

Viewing 1 replies (of 1 total)
  • The topic ‘Write text below a specific part of a sentence’ is closed to new replies.