Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript?
Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript?
To achieve this effect, you can utilize the :after pseudo-element in your CSS.
div {
font-size: 15px;
width: 300px;
line-height: 30px;
}
span {
position: relative;
}
span:after {
position: absolute;
content: '2';
width: 100%;
height: 100%;
top: 100%;
left: 0;
border-top: 1px solid black;
text-align: center;
font-size: 9px;
line-height: 15px;
}<div>over the <span>Triangle, a few months later,</span> another plane disappeared. A ship named the Sandra.</div>If you'd like to make the width of the div responsive by using percentage units, you can prevent line breaks within the span element by setting white-space: pre.
In the example below, the width has been specified as 25% to illustrate this concept.
div {
font-size: 15px;
width: 25%;
line-height: 30px;
}
span {
position: relative;
white-space: pre;
}
span:after {
position: absolute;
content: '2';
width: 100%;
height: 100%;
top: 100%;
left: 0;
border-top: 1px solid black;
text-align: center;
font-size: 9px;
line-height: 15px;
}<div>over the <span>Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>You can also leverage the CSS attr() function to retrieve attribute values from the HTML element where the :pseudo-element is applied.
div {
font-size: 15px;
width: 50%;
line-height: 30px;
}
span {
position: relative;
white-space: pre;
}
span:after {
position: absolute;
content: attr(data-num);
width: 100%;
height: 100%;
top: 100%;
left: 0;
border-top: 1px solid black;
text-align: center;
font-size: 9px;
line-height: 15px;
}<div>over the <span data-num="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>Referencing the solution provided by @chipChocolates, if you prefer not to place the subscripts in the CSS style block but rather incorporate them directly into the body when necessary...
div {
font-size: 15px;
width: 300px;
line-height: 30px;
}
span {
position: relative;
width: auto;
height: 15px;
}
span:after {
position: absolute;
content: attr(subscript-line);
width: 100%;
height: 100%;
top: 100%;
left: 0;
border-top: 1px solid black;
text-align: center;
font-size: 10px;
line-height: 10px;
}<div>over the <span subscript-line="1">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>
<div>over the <span subscript-line="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>
<div>over the <span subscript-line="3">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>Recently I started working with Vuejs and encountered an unexpected issue in my application. The purpose of my app is to search for channels using the YouTube API and then display those channels in a list. However, when I try to render the list of subscri ...
I'm currently working on developing a WhatsApp chatbot using the whatsapp-web-js package. However, I am facing some difficulties with implementing it due to my limited knowledge in node JavaScript and async code. let client; //To establish connection ...
Is there a way to include a script in an iframe? I came up with the following solution: doc = $frame[0].contentDocument || $frame[0].contentWindow.document; $body = $("body", doc); $head = $("head", doc); $js = $("<script type='text/javascript&a ...
I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...
I'm in the process of setting up a Magento category page that allows users to add configurable products directly from the category page, which is not the standard operation for Magento. After putting in a lot of effort, I have almost completed the ta ...
I am attempting to pass a PHP array to an AJAX function in order to populate dynamically created tables. To achieve this, I need to pass the values in an array all at once to avoid the issue where only the last dynamic table is populated. However, it see ...
In an effort to make my jQuery call more dynamic, I have a controller with the following method: public function api(Request $request , $project_id){ return Program::where('project_id',$project_id)->get(); } This results in: [{"id":178," ...
After implementing a res.redirect('page.ejs');, my browser is displaying the following message: Cannot GET /page.ejs In my routes file, I have not included the following code structure: app.get('/page', function(req, res) { ...
When a user continuously clicks a link, I need to call an ajax service. Currently, my code only works for a single click - the ajax call is made and functions correctly, but if the user clicks multiple times, only the first click is registered. I want to k ...
I have come across an issue with my TypeScript class that inherits another one. I am trying to create a factory class that can generate objects of either type based on simple logic, but it seems to be malfunctioning. Here is the basic Customer class: cla ...
I keep receiving undefined type for: $(".ui-slider-handle").attr("title", '"'+current+'"'); Even though I can successfully alert the updated value of current on line 29, it seems to not be working with .at ...
I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...
Hey there, I'm currently utilizing the Google Maps Node.js client web API and want to showcase a map on my HTML views using AngularJS 2. I have a server export that sends an object to my AngularJS2 client service const googleMapsClient = require(&ap ...
I am currently utilizing Material-UI Google Autocomplete, which can be found at https://material-ui.com/components/autocomplete/#google-maps-place, in order to prompt users to provide their address. https://i.stack.imgur.com/nsBpE.png My primary inquiry ...
Having trouble calling a method in the controller via URL, as I keep encountering a 404 error. What could be the issue? API Endpoint: http://localhost:5000/Home/HomeTest /*.net core web-api*/ namespace MyApp.Controllers { Route("api/[controller]") ...
http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...
I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...
I have encountered an issue while working on a solution within a CMS (EPiServer). When I utilize console.log to check my object, it displays a null value. $(document).ready(function () { console.log("$('.EPiRequester').html() =" + $('. ...
Here is a snippet from my app.js that deals with managing connections: var connections = []; function removeConnection(res) { var i = connections.indexOf(res); if (i !== -1) { connections.splice(i, 1); } } I make a call to removeConn ...
Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...