What is the best way to center an annotation horizontally above a word within a sentence?

I am looking for a CSS element that will allow me to place an annotation above a specific word or part of a sentence. The annotation should always be visible and not disrupt the surrounding text.

It is easy to achieve this effect if the word is longer than the annotation, but I am having trouble when the annotation is longer than the word below it.

I initially thought the span element would work best, but it seems like that might not be the case. I also tried using the table element, but neither scenario seemed to work properly.

p { font-size: 1.5em }

.highlight {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  color: red;
}

.highlight .annotation {
  position: absolute;
  width:100%;
  left: 0;
  bottom: 80%;
  font-size: 0.75em;
  text-align: center;
  white-space: nowrap;
}
<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

This screenshot illustrates what I am trying to accomplish:

https://i.sstatic.net/kca4h.png

htmlcss

Answer №1

To ensure the annotation is perfectly centered, you can utilize the CSS properties 

left: 50%; transform: translateX(-50%);
. The 'left' attribute is calculated in relation to the parent element (specifically 50% of the width of .highlight), while the transform: translateX property adjusts based on the element itself (-50% of the width of .annotation).

p {
  font-size: 1.5em
}

.highlight {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  color: red;
}

.highlight .annotation {
  position: absolute;
  /** no need for width: 100%; **/
  left: 50%;
  bottom: 80%;
  transform: translateX(-50%);
  font-size: 0.75em;
  white-space: nowrap;
}
<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

If you want the annotated text to expand with the annotation, you can style the container as an inline flexbox column (reversed) by setting .highlight accordingly and centering the items within:

p {
  font-size: 1.5em
}

.highlight {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  color: red;
}

.highlight .annotation {
  margin-bottom: 0.1em;
  font-size: 0.75em;
  white-space: nowrap;
}
<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with the fixed header on a container causing a horizontal scroll bar

This scenario presents a bit of a challenge! I could solve it by adjusting the container's height, but that would disrupt the fixed position of the sticky header. My goal is to have a scrollbar visible in both the X and Y directions on the .scrollabl ...

javascriptjqueryhtmlcss

Detection of Unauthorized Video Downloads

Is it feasible to identify individuals who illegally download videos from websites, such as YouTube, by using video grabber applications? I wonder if these downloads could be traced in some way, enabling the identification of offenders. Is there a method t ...

phphtmlflashvideovideo-streaming

A simple way to add a value from a select option into a textarea when there are several dropdown menus and select elements sharing the same

I have several divs with the same class names where I need to input a value from a dropdown menu into the textarea that belongs to the div where the select element is located. I want this function to work smoothly even with more than 10 divs, which is why ...

javascripthtmljquery

Create a JavaScript onclick popup that hides the destination URL without displaying it

After searching through numerous forums without finding a satisfactory answer, I decided to turn to Stackoverflow for help. Unsure if this is the right category for my question. I'm looking to hide an href link that opens as a popup. It's diffic ...

javascriptphpjqueryhtmlonclick

The custom directive containing ng-switch isn't being reevaluated when the value is updated

I have developed a unique directive that acts as a reusable form. The form includes an error message display section which utilizes ng-switch: <div ng-switch="status"> <span ng-switch-when="Error" class="text-error">An Error occurred</spa ...

javascripthtmlangularjsangularjs-directiveng-switch

Ways to enable this feature to function

I am working with a div that contains multiple tables structured like this: <div id="div1"> <div id="div2"> <div id="div3"> <table id="table1"><tr><td></td></tr></table> ...

csshtml

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

The button's size shrinks significantly when there is no content inside

When text is absent, the button shrinks in size. I am utilizing an angular model to bind the button text: <button type="button" class="btn btn-primary" ng-bind="vm.buttonText" tooltip="{{vm.tooltipText}}" ></button> I prefer not to apply any ...

javascripthtmlangularjs

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

htmlcssangularjs

The arrangement vanishes when using identical html/css coding

When using the same HTML/CSS coding, the layout disappears and appears misaligned on one page but works perfectly on another. The issue seems to be that the first section of the main area is getting a width of 938px instead of 5px. I've tried adding w ...

htmlcss

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

htmlangulartypescriptangular-material

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

Display button in Django template based on user's group level

In my application, there are 3 groups with different permissions: viewer, editor, and creator. I need to display the appropriate buttons based on these permissions. For viewers, they can only see lists and details. Editors have viewer permissions plus th ...

htmldjangoview

Is it possible to instruct Vue to prioritize the inherited class over others?

I have a situation in my component where I need Vue to disregard the existing class and instead use the inherited class, but only if it is of the same type as the inherited class. Let me illustrate with an example: Consider a button component like this M ...

htmlcssvue.jsvuejs3tailwind-css

How can you deactivate all form elements in HTML except for the Submit button?

Is there a method available to automatically deactivate all form elements except the submit button as soon as the form loads? This would entail pre-loading data from the backend onto a JSP page while restricting user access for editing. Users will only be ...

javascriptjqueryhtmljsp

Appearance template failing to load

After setting up a local website on a new IIS server 8, I encountered an issue where the style sheet was not loading properly. The master page is referencing the style sheet like this: href="/HeadOffice/Styles/HeadOfficeCalendar.css" For example: <l ...

cssasp.netiis

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

csscss-transitions

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss