Enhancing the bottom border of an unordered list when incorporating styled bullets

I have a list with some items. I used a CSS trick to style the bullet as a circle. However, I would like to add a border underneath each item to separate them.

Because I removed the default bullets using list-style: none, the "bullet" is positioned -1em, causing the border not to extend completely under it.

<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li class="selected">Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
}
li:before {
    content:"";
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 10px;
    height: 10px;
    left: -1em;
    top: 0.9em;
    position: relative;
    display: block;
}
selected:before {
    background-color: white;
}

Check out the Plunker

Do you have any suggestions on how I can make the bottom border extend beneath the entire list item, including the styled bullet?

Answer №1

To prevent the bullet and text from appearing on different lines, adjust the display properties of the bullet to inline and add a right margin:

li:before {
    content:"";
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 10px;
    height: 10px;
    margin-right:0.3em;
    position: relative;
    display: inline-block;
}

If you require additional space within your list items, consider padding them accordingly:

li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    padding:3px 4px;
}

For a visual representation and demonstration, check out this JSFiddle.

Answer №2

To customize your list style, consider adding the following to your CSS:

padding-left:1em;
margin-left:-1em;

The padding will move all content inside the list item to the right, aligning it with the border. The negative margin will then shift the actual list item back to its original position on the left.

Here is a plunker fork demonstrating this technique: http://plnkr.co/edit/zhir039xFgkF0mjKLJyq?p=preview

Answer №3

If you need help with your code, check out this plunker:

http://plnkr.co/edit/abcXYZ12345?q=preview

Here are the steps you should follow:

  • Get rid of all padding from the unordered list
  • Add a left padding of 1em to each list item

    ul {
        margin: 0.75em 0;
        padding: 0;
        list-style: none;
    }
    
    li {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: red;
        padding-left: 1em;
    }
    

Follow these instructions and your problem will be solved.

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

"Learn how to specifically extract parent <li> elements without including the child <li> elements

When attempting to crawl a website [URL: https://www.khaasfood.com/shop/], my first task is to retrieve the categories with their hierarchy. The .container element contains a list of li tags representing parent categories. Each parent category may also h ...

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

Utilizing Wordpress post images to dynamically change background URLs in CSS

Is there a way to dynamically set a background image in CSS using PHP, specifically the Wordpress post image? background: <?php if(has_post_thumbnail()){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'dest ...

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below: <ul> <li> <a href="#" role="button" class="js-pagination link" data-page="1">1</a> </li> <li> <a href="#" role="button" class="js-pagination link active" data ...

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...

CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

I have a set of radio buttons arranged like this: https://i.sstatic.net/l4uhp.png I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this: https://i.sstatic.net/IGUAc.png However, the current setup uses a ...

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears. For example, the first bar would appear at 100px, the second at 110px, and so on. I've been experimen ...

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

A combination table featuring both fixed and scrolling columns

I'm struggling with a table design where I want part of it to be fixed and the rest to be scrollable. My goal is to achieve something similar to this example, but within a single table structure. If interested, you can view an example here. I found ...

Incorporate a dynamic PowerPoint presentation directly onto my website

In my situation, on the client side, users can select image files (jpg|png|gif), PDF files, and PPT files which are then stored in a database. When viewing these selected files in the admin panel, I am using conditional statements to display them appropr ...

Implementing a Vue.js v-bind:style attribute onto a dynamically generated element post-page initialization

Let me start by explaining my current issue and dilemma: I have been tasked with converting an existing JS project into a Vue.js framework. While I could easily solve a particular problem using jQuery, it seems to be posing quite a challenge when it comes ...

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

How do I execute 2 functions when the button is clicked?

<button id="take-photo"> Take Image</button> <button type="submit" value="Submit" >Submit </button> How can I trigger two tasks with a single button click? 1. Executing a function based on ID Next 2. Submitting the form with ...

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

To access the link, simply click once if there is no child menu. However, if there is a child menu attached, be sure to click

I am working on a mobile menu that is designed to slide out when clicked. Currently, the parent pages are displayed by default. I want to implement functionality where if a parent page has child pages, clicking on it will slide down the sub menu. If click ...

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

The .AppendChild() method does not appear to be working as expected following the completion of

Encountering a peculiar problem here. The scripts run smoothly, but the content doesn't display on screen until I "inspect element" and then close the inspector window or zoom in/out. It's not an issue with the "display" CSS property because even ...

Struggling with a Bootstrap v5.0.2 Modal glitch? Let's dive into a real-life case study to troub

I am seeking assistance with a problem that I am encountering. I am currently using Bootstrap version 5.0.2 (js and css). Despite coding all the required parameters, I am unable to make the modal functionality work. I have been trying to figure out what&ap ...