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>My DataGrid table is showing blank. I experienced the same problem in a previous project and recreated it in a new one with updated versions of django and mui libraries. Here is an example of my data displayed with DataGrid not working I posted a bug rep ...
While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...
A few days back, I encountered a strange bug in my code that has left me puzzled. It appears that a variable declared within a narrower scope is somehow leaking into a broader one. Any insights into what might be going wrong here? Here's a simplified ...
I am struggling to comprehend the order of execution in the following code snippet. It is a portion of a larger script, but it all begins with $( "#select-overlay" ). function findSelectedMap(mapID) { $.getJSON('maps.json', function (json) { ...
Here is a code snippet that I am working with: var randFriend = friendList[Math.floor(Math.random() * friendList.length)]; if (randFriend == admin) { //Do something here } else if (randFriend != admin) { client.removeFriend(randFriend); } I am tr ...
Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...
Trying to wrap my head around rxJs and experimenting with using the where query in Firestore collection. However, I've run into an issue where the output of this collection is dependent on retrieving the user ID from Firebase Auth. Here's what I ...
I'm attempting to loop through X3DOM nodes in D3.js, but I'm encountering an issue. Check out the code snippet below: var disktransform = scene.selectAll('.disktransform'); var shape = disktransform .datum(slices ...
After examining the code provided, I've almost achieved the desired outcome. The only issue is that there are no scroll bars present. I have identified two potential solutions: 1) One option is to remove the !doctype declaration at the beginning of t ...
I am trying to create a round diagram where I want to show a div when users hover over each section (arcs). Initially, I thought about using canvas like in this example: . However, I am facing difficulties drawing an arc in canvas. Should I explore other ...
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...
Having reviewed several questions related to this issue, I am still encountering difficulties. Below is the code snippet that I am struggling with: <body> <?php //To begin, there is a form with a drop-down menu and a button, which will trigge ...
I'm looking for a way to update the data in my div whenever I click on a link that reveals the div. Despite finding many similar answers, none have worked for me. Here's what I have: I have multiple divs that become visible when clicking on lin ...
I encounter a problem while trying to upload a file to Amazon S3. The provided code is: const s3 = require('s3'); const client = s3.createClient({ maxAsyncS3: 100, s3RetryCount: 3, s3RetryDelay: 30 ...
Below is my current AJAX code setup: optionScope.data().stage = 'b'; $.ajax({ url: "functions/contact.php", type: "post", data: {'stage': optionScope.data().stage}, success: function(data, status) { ...
I currently have 3 different schemas: Building const BuildingSchema = mongoose.Schema({ address: { type: String, required: true }, numberOfFloors: { type: Number, default: 0 }, }); Apartment const RoomSchema = mongoose.Schema({ roomNumber: { type: ...
const hostname = "192.168.8.154"; const port = 3002; app.use('*', function (req, res, next) { db.collection('sys_params').find().toArray() .then(sysParams => { //console.log(sysParams); app.locals.sysParams ...
I have this HTML structure: <button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score"> <span ng hide="hideConditional()" class="font-white">score</span> <span ng-show= ...
Within my code, I currently have a watcher set up like this (inside <script setup>): const form = reactive({ body: '', image: '' }) watch(() => form.image, () => { console.log(form.image) }) I am looking to enh ...
Currently in my all-encompassing react application, there's a react element that has setInterval within componentWillMount and clearInterval inside componentWillUnmount. Luckily, componentWillUnmount is not invoked on the server. componentWillMount( ...