Creating a unique custom bullet style by utilizing the ::before pseudo-element that results in a noticeable gap between the first two

Explore this Code

Here is the issue at hand:

https://i.sstatic.net/Fp6u2.png

My HTML code looks like this:

<ol class="steps">
    <li>
        Select elements are displaying correctly
        <br>
        <select>

        </select>
    </li>
    <li>
        Textareas are showing up properly
        <br>
        <textarea></textarea>
    </li>
    <li>
        However, when text spans multiple lines, there is a large gap between the first two lines. You can also resize the output window to see the impact.
    </li>
</ol>

I have tried using custom ordered bullet lists. I attempted replacing the textnodes with <span>s with no success. Replacing them with <p> added an unexpected line break between li::before and <p>.

Any ideas on how to resolve this issue?

UPDATE: Here is the updated solution. I removed the br style rule and applied position absolute as a workaround.

htmlcss

Answer №1

To accommodate the green counter placed before the <li> text, adjustments need to be made to the second line spacing. One method is to apply position: absolute to .steps li:before, but this will require tweaking of the positioning details.

Answer №2

The issue at hand is due to the line height of your bullet pseudo elements.

Despite my attempts to replace the textnodes with <span>s, the problem persisted.

I recommend trying again, but this time ensure that those spans are set to display: inline-block.

Additionally, include vertical-align: top for both the bullets and text spans. If needed, further adjust the horizontal positioning of the bullets using relative positioning along with an appropriate top value.

Another method, which I often prefer, involves giving the li elements suitable margin or padding on the left side. Then, float the bullets or position them absolutely so they align within the space created by the margin/padding; shifting them to the left utilizing a negative margin-left (float) or left (absolute positioning.)

Answer №3

Check out this Pen

.steps {
counter-reset: li-counter;
list-style-type: none;
margin-left: 0;
padding-left: 10px;
}
.steps li {
counter-increment: li-counter;
padding-left: 35px;
  position:relative;
}
.steps li p {
    padding-left: 60px;
    position: absolute;
    top: 0;
    left: -14px;
}
.steps li:before {
display: inline-block;
content: counter(li-counter);
height: 30px;
width: 30px;
border-radius: 50%;
background: #20ED89;
color: white;
text-align: center;
line-height: 30px;
margin: 10px;
margin-left: -35px;
}

.steps br {
    content: " ";
    display: block;
    margin: -10px;
}
<ol class="steps">
    <li>
        The select elements are looking good
        <br>
        <select>

        </select>
    </li>
    <li>
        Textareas are displaying correctly too
        <br>
        <textarea></textarea>
    </li>
    <li><p>However, text that spans multiple lines is showing a large gap between the first two lines. Feel free to adjust the width of the output window to see the impact.</p>
    </li>
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

javascriptjquerycsscordova

Is my code error caused by floating elements to the left, right, and adding a clearfix?

Trying to align the navigation menus image with the social icons has proven to be quite challenging. As a student looking to develop a WordPress theme, I would appreciate some assistance as I am currently stuck. Any help is greatly appreciated, thank you. ...

htmlcsswordpress

Stream music from SoundCloud by simply clicking a button on an external source, no need

My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...

jqueryhtmlwordpressiframesoundcloud

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

Attempting to arrange all the images in a horizontal display rather than a vertical one

This is my first ever question on the forum sorry if it is unprofessional hopefully i can learn from my mistakes on this post!! I put the question in the title but if you have any questions feel free to ask below THANK YOU! for the help! My Code ...

htmlcss

align all items centrally and customize Excel columns based on the length of the data

Is there a way to dynamically adjust the column width based on the length of data in an Excel report using PHPexcel? Additionally, how can I center all the data in the Excel sheet? Here is the current code snippet: <?php if (!isset($_POST['send&a ...

javascriptphphtmlmysqlphpexcel

Tips for concealing a submit button in CodeIgniter

Is it possible to hide the submit button if the completion status is 'completed'? Here is a snippet of my code: <input type="submit" <?=($row[ 'checklist_id']=="Denied" ||$row[ 'checklist_id']=="Approved" ||$row[ &apos ...

phpcsscodeignitercodeigniter-2

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

javascriptjqueryhtmlcsstwitter-bootstrap

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

I need help with a specific pseudo-class selector issue. Even with !important, the text in the li:first-child element is not appearing in blue. The selector specificity for p is: (0, 0, 1) The selector specificity for li:first-child is: (0, 1, 1) I want ...

htmlcsscss-selectorscss-specificity

iOS emphasizes special characters by printing them in bold

Some parts of the website I am managing are showing German umlauts in bold (as seen in the screenshot). The font style being used is font-family: Source Sans Pro, Arial, sans-serif; with font-weight: 300. This font is sourced from Google Fonts. When I cha ...

ioscssfonts

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

cssreactjsmaterial-uinavigation

Trouble encountered while creating a table with the Bootstrap grid system

I'm attempting to create a table using the bootstrap grid system. The HTML code below is meant to generate the table, but I'm encountering an issue where the table cells overlap on screens with a width of 768px. .row.header { height: 44px; ...

htmlcsstwitter-bootstrap

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

javascripthtmlcssuser-interfacebootstrap-4

Arranging the Burgers on the Menu using Flexbox

I'm looking to develop a simple note-taking app, but I'm struggling to figure out how to place a burger menu on the right side of a flexbox. Below are my JS and CSS files: JavaScript / HTML <div className={styles.wrapper}> < ...

cssreactjsnext.jsflexbox

Struggling with converting my menu design into a dropdown menu

Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...

htmlcssmenu

Flexbox causing issues with relative positioning at the bottom of the screen in various browsers

My flex component looks like this: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ... width="100%" height="100%" creationComplete="init()"> ....... <components:Naviga ...

javascripthtmlapache-flexflash

What alternative to tables can I utilize that possesses similar attributes?

I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...

htmlcsshtml-table

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...

javascriptjqueryhtml