Here is the code snippet I am working with:
<p>Test
<sup>1</sup>
<sup>, 2</sup>
</p>The output of this code is "1 , 2". I am having trouble applying styles to the sup elements, as there are no margins or paddings set. Can someone suggest the appropriate style to apply to all but the first sup element?
If you want to use only one sup, you can do that. But if you need two, you can experiment with a negative margin on the second sup. To achieve this, target all children except the first-child:
p > sup:not(:first-child) {}
Test it out by viewing the example below:
p>sup:not(:first-child) {
margin-left: -4px;
}<p>Test
<sup>1,2,</sup>
<sup>3</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4,</sup>
<sup>5,</sup>
<sup>6,</sup>
<sup>7,</sup>
<sup>8</sup>
</p>Is this the solution you were looking for?
<p>
<sup>1, 2</sup>
</p>
If you need to utilize two elements, you can try the following:
<p>test
<sup>1</sup>
<sup style="margin:0; margin-left:-5; padding:0;">, 2</sup>
</p>
Instead of placing the comma inside the first <sup> tag, it should be located within the subsequent ones as shown below:
<p>Test
<sup>1,</sup>
<sup> 2</sup>
</p>I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...
I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...
I'm currently working on setting up a grid of thumbnails for my blog posts using Bootstrap 4. The columns have a size of col-md-6. Within each column, there is an anchor with a background image and a gradient overlay that transitions from black to tr ...
link to code: http://jsfiddle.net/xVCrn/1/ (best viewed in chrome / webkit) I'm attempting to create a 1px margin for the red section within the dark button area, but I am struggling to adjust the height of the red part. =( The objective is to: ...
I am puzzled as to why the navigation links at the bottom of my page ("prev" and "next") are wider than the post teasers in my #bloglist above. I am currently utilizing twitter bootstrap with their provided scaffolding. Any insights or recommendations wou ...
Just starting out. While working with HTML, I experimented with placing the main tag outside of the body tag instead of nesting it inside as recommended by HTML5 standards. To my eye, both versions looked identical when I viewed the HTML file side by sid ...
There is a webpage called "main.jsp" within the domain "domain1". This page contains an iframe that loads content from another domain known as "domain2". Essentially, "main.jsp" serves as a common content platform, with the iframe displaying content from v ...
I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...
Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...
I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...
I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this: | | | | | | | | | | | | | | div1 | ...
Is there a creative solution to dynamically increase the width of a border up to a certain point, using the thickness of the border as a progress bar indicator while reusing defined colors in stylesheets? Currently, I have the element with the border nest ...
Unfortunately, I am unable to provide specific details about my issue as I am unsure of the exact cause. /db/migrate/XXXXXX_create_restaurants.rb ... t.string :restaurant_name t.string :restaurant_addr ... /app/controllers/restaurant.rb def post @res ...
I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...
A commenting system is being implemented using jQuery, Ajax, PHP, MySQL, and HTML. There seems to be an issue where clicking the Edit button displays the comment of the first row in the MySQL table instead of the selected row. However, after editing, it do ...
This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...
Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom. I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is t ...
Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...
I need assistance with aligning a video in the center of a fixed height cell while hiding the overflow at the top and bottom. Here is what I have so far: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height ...
I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...