Hey there, I'm facing an issue with the anchor underline on my website. The underline is currently broken, with part of it at the baseline of the text and another part in the middle due to a small character size. How can I make the underline appear as one continuous line under both characters?
Your help would be much appreciated. Thanks!
To achieve superscript text, utilize the <sup> tag. This is an example:
<a href="#">H<sup>2</sup>O</a>
and include this CSS:
a { text-decoration: underline; }
Some individuals may overlook using superscript due to misconceptions such as believing it's outdated like the <b> tag (which it isn't) or that it lacks semantic value (which it does).
There's a possibility that removing the underline and applying a bottom-border to the a element could be effective. However, there might be better alternatives worth exploring.
Wow, I didn't realize there was a
<sup>tag! I was using my own CSS for superscript with.superscript { font-size:xx-small; vertical-align:top; }
If you prefer to use CSS for styling superscripts, you can simply add this:
.superscript {vertical-align:super;}
However, as mentioned by cletus, it's best to stick with the semantic and trendy approach of using the <sup> tag.
Understanding the specific CSS styles applied to both elements would be beneficial, but experimenting with the line-height property and setting a consistent vertical-align value for each could help. Alternatively, consider using a bottom-border instead of text-decoration:underline.
a span.superscript { vertical-align:baseline; line-height:1; }
Update: I am not encountering this issue at http://jsbin.com/orudi
<a href="#">R<sup>5</sup></a>
<style>
body { width:5em; margin:0 auto; font-size:100%; padding:5em 0 0; background:#000; }
a { text-decoration:underline; color:#fff; font-size:5em; }
a sup { vertical-align:top; font-size:xx-small; font-size:.5em; }
</style>
If you're looking to avoid issues with subscript and superscript affecting your line heights, give this CSS code a try. It's been effective for me in maintaining consistent spacing.
sup, sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.75em; font-weight: normal; }
sub { top: 0.4em; }
Test out these chemical formulas:
MgNaA<sub>l5(</sub>Si<sub>4</sub>O<sub>10</sub>)<sub>3</sub>(OH)<sub>6</sub>
or
Radioactive Phosphorus-32 is <sup>32</sup>PO<sub>4</sub><sup>3-</sup>
Although the bootstrap tabs are functioning well, users are requesting that I increase the thickness of the borders. However, whenever I try to make the border thicker than 1px, an extra line appears on the bottom border of the active tab. I attempted to a ...
I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...
Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...
Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...
When using Python Selenium to extract table data from a website, I encountered an issue where I am only able to retrieve data2 and not data1. Below is the code snippet I am using: elem = browser.find_element_by_css_selector('td.el-table_1_column_1.is ...
Can someone please help me figure out how to color different regions of an image (PNG) using JavaFX? The image is currently displayed in an ImageView: https://i.sstatic.net/RVhE4.jpg I'm looking to color region 1 blue, the second one red, and the la ...
I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...
Here's the script I am working with: <v-col cols="12" md="12" style="position: -webkit-sticky; position: sticky; bottom: 0;background: white;" > <v-btn class="success" block>Select</v-btn> </v-col> If you want ...
Below is the HTML code: <a href="#/" class="next openModalBox lessOpacity">Move forward</a> <div id="modalBoxContent"> <p style="font-size: .8em; text-align: center;"> You have successfully completed the study part of the t ...
My goal is to incorporate theme support into my single page application. The catch is that the theme change needs to be done locally through JavaScript without making any server calls, in order to work in offline mode. Since I am using angularjs, the HTML ...
I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...
I've tried different solutions for similar issues, but I'm struggling to get the text to appear properly on my custom buttons in Safari. They are displaying perfectly in Chrome and Firefox, but not on iOS devices. Does anyone have any suggestion ...
I need your help with a problem I'm facing. The navigation bar is not collapsing when I click the link in mobile view. Check out this video for more details: https://www.youtube.com/watch?v=2dBpcFMjqY0 ...
I've been struggling to get the selected option aligned left like the other dropdown options. Even though I've added 'text-align:left;' in every CSS option, it's not working. I suspect that the JavaScript code is affecting the al ...
I am a beginner in the world of CSS and have been working on a practice project. However, I am struggling to achieve what the title suggests. I attempted using the margin-right: auto method that I've learned from various tutorials, but it only ends u ...
As I construct the sidebar, I have successfully moved the image to the far right of the screen using style="text-align: right;". However, I am facing difficulty aligning a red bar in the same div along with the image. The image alignment is perfe ...
Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the paren ...
I ran into an issue where I needed to determine the height of a horizontal scrollbar. This question and answer recommended using the clientHeight property to calculate the difference. Unfortunately, this method no longer works as shown here: https://jsfid ...
Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...
My Swipe.Js version : "^7.0.2" Today, I attempted to use Swipe.Js and encountered an issue with my import code. import { Swiper, SwiperSlide } from 'swiper/react'; as described on https://swiperjs.com/react#installation. However, when ...