I am trying to create a basic list without any images included.
I would like the first letter of the last item in the list to be styled with "vertical-align: super;", however, this is causing an increase in the height of the paragraph.
#third::first-letter {
vertical-align: super;
}
Is there a way to resolve this issue without knowing the specific font size and paragraph height?
Check out my code on fiddle
To adjust the position of the ::first-letter vertically without changing the box's height, you can use the float property on the pseudo-element and apply a negative margin-top to it:
#third::first-letter {
margin-top: -.5em;
float: left;
}
*{margin:0;padding:0;}
html {font-size: 200%;}
#first {background-color:pink;}
#second {background-color:aqua;}
#third {background-color:lightgreen; margin-top: 1em;}
#third::first-letter {
margin-top: -.5em;
float: left;
}<p id="first">My list:</p>
<p id="second">|-> not last element</p>
<p id="third">|-> last element</p>However, as highlighted by @Alohci in the comments, Firefox may not match the first character with ::first-letter if it's not a letter or digit.
In cases where the first character is not a letter or digit but another symbol like a pipe |, consider using the ::before pseudo-element to properly style it:
#third::before {
content: "|";
margin-top: -.5em;
float: left;
}
*{margin:0;padding:0}
html {font-size: 200%;}
#first{background-color:pink;}
#second{background-color:aqua;}
#third{background-color:lightgreen; margin-top: 1em;}
#second::before,
#third::before {
content: "|";
}
#third::before {
margin-top: -.5em;
float: left;
}<p id="first">My list:</p>
<p id="second">-> not last element</p>
<p id="third">-> last element</p>Opting for line-height over negative margin-top proves to be the more effective solution. By utilizing line-height, any potential blank areas beneath the text are eliminated.
I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...
Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...
I'm having trouble getting a JavaScript function to run after being redirected to a specific page like "example.com" when the DOM is ready for it to work with. Unfortunately, it seems that $(document).ready() is running before "example.com" finishes l ...
I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional ...
When working with Django framework and python scripts to validate XML files, my usual approach involves parsing the XML file located at a specified location using the following code: import xml.etree.ElementTree as ET tree = ET.parse('config.xml&apos ...
Have you ever wondered how to create a webpage where users can navigate to other websites or pages without seeing their address, simply by selecting from a drop-down menu? Take a look at this example. Another similar example can be found here. When visit ...
Hi there! I'm in the process of creating a chatbot using a basic input text box and button in HTML, with a php start function. Unfortunately, when I enter text into the textbox, nothing is showing up on the screen and the button doesn't seem to b ...
Having just started learning HTML, CSS, and PHP, I find myself in need of assistance. Despite extensive research online, I have hit a dead end and cannot seem to find any productive solutions. Any guidance or suggestions would be greatly appreciated! I am ...
Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...
I am encountering an issue for the first time. Inside ajax.html, I have the following code in the header: $(document).ready(function(){ $( "#result" ).load( "/loaded.html" ); }); In the same directory, there is a second page named loaded.html: <d ...
For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...
I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...
As a first-time user of stackoverflow, I am unfamiliar with its rules and regulations, so I apologize in advance for any mistakes I may make. Currently, I am attempting to create a Spotify clone using React. Everything was going smoothly until I completed ...
//I followed the instructions in the tailwind documentation to install and set up everything. However, when I try to use tailwind utility classes in my HTML file, they don't seem to work. Can someone please assist me with this issue? // Here is my sr ...
https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...
As the title suggests, I am encountering an issue with my code. Here is the snippet: $('#somediv').change(function() { if(this.checked) { $('.leaflet-marker-pane').show(1); } else { $('.leaflet-marker-p ...
I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here. Upon examining the example linked above, it appears that the content of the page begins below t ...
I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...
As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...
Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...