A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this.

As a result, the appearance is as expected and behaves normally.

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

Check out the JSFiddle Example

CSS 

.accordion-menu {
  width: 100%;
  background: #52b3d9; }

.accordion-list {
  position: relative;
  display: none;
  width: 100%;
  /* Item submodule */
  /* Level modifiers */ }
  .accordion-list.is-root {
    display: block; }
  .accordion-list.is-opened {
    display: block; }
  .accordion-list-item {
    width: 100%;
    display: block;
    /* States */ }
    .accordion-list-item__icon {
      font-size: 1.125em;
      display: inline-block;
      vertical-align: middle; }
    ... (CSS continues)

<p>HTML Structure </p>

<pre><code>(HTML code provided in the original text)

Is there a way for me to ensure that the bottom border spans the full width?

htmlcsslayoutborder

Answer №1

Instead of using padding, consider utilizing text-indent:

.accordion-menu {
  width: 100%;
  background: #52b3d9;
}

ul {
  padding: 0;/* reset */
}

.accordion-list {
  position: relative;
  display: none;
  width: 100%;
  /* Item submodule */
  /* Level modifiers */
}

.accordion-list.is-root {
  display: block;
}

.accordion-list.is-opened {
  display: block;
}

.accordion-list-item {
  width: 100%;
  display: block;
  /* States */
}

.accordion-list-item__icon {
  font-size: 1.125em;
  display: inline-block;
  vertical-align: middle;
}

.accordion-list-item__link {
  display: inline-block;
  white-space: initial;
  max-width: 70%;
  vertical-align: middle;
  color: #f7f7f7;
}

.accordion-list-item__link:visited,
.accordion-list-item__link:link {
  color: #f7f7f7;
}

.accordion-list-item__post-count {
  font-size: 0.75em;
  position: absolute;
  display: inline-block;
  right: 0;
  color: #fdfdfd;
  padding: 0 0.83333em;
  margin-right: 0.83333em;
  background: #404247;
  border-radius: 10px;
}

.accordion-list-item__controls {
  padding: 0.625em 0.3125em 0.625em 0em;
  text-indent: 0.3125em;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  color: #f7f7f7;
}

.accordion-list-item__controls:hover {
  color: #FFC107;
}

.accordion-list-item__controls:hover .accordion-list-item__link {
  color: #FFC107;
}

.accordion-list-item__controls::before {
  display: inline-block;
  content: '\f10c';
  vertical-align: middle;
  font-family: "FontAwesome";
}

.accordion-list-item__controls::after {
  content: '';
  display: block;
  position: absolute;
  border-bottom: 1px solid #c8c8c8;
  bottom: 0;
  width: 100%;
  left: 0;
}

.accordion-list-item.has-children > .accordion-list-item__controls::before {
  display: inline-block;
  content: '\f054';
  font-family: "FontAwesome";
  color: #f7f7f7;
}

.accordion-list-item.has-children > .accordion-list-item__controls.is-opened::before {
  content: '\f078';
  color: #f7f7f7;
}

.accordion-list--level-0 {
}

.accordion-list--level-1 >li div {
  text-indent: 10px;  
}

.accordion-list--level-2 >li div {
  text-indent: 20px;
}
.accordion-menu ul li .accordion-list-item__post-count {
  text-indent:0;
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion-menu">
  <ul class="accordion-list cd-accordion-menu is-root accordion-list--level-0">
    <li class="accordion-list-item has-children">
      <div class="accordion-list-item__controls is-opened">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">Sub Level 22</a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
      <ul class="accordion-list is-opened accordion-list--level-1">
        <li class="accordion-list-item has-children">
          <div class="accordion-list-item__controls is-opened">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">Sub Level 2</a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
          <ul class="accordion-list is-opened accordion-list--level-2">
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
          </ul>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-list-item__controls">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-list-item__controls">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
        </li>
      </ul>
    </li>
    <li class="accordion-list-item">
      <div class="accordion-list-item__controls">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
    </li>
    <li class="accordion-list-item">
      <div class="accordion-list-item__controls">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">Sub Group 1</a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
    </li>
  </ul>
  <!-- cd-accordion-menu -->
</div>

Link to Example

Answer №2

 <li class="accordion-list-item">

Consider adding a border-bottom style to the specified class.

Answer №3

By adjusting the padding within the classes .accordion-list--level-2{} and .accordion-list--level-2 li div{}, you can ensure that the border extends fully across. The previous padding on the ul element was limiting the width of the div from spreading evenly.

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

The issue with clip-path not functioning correctly in Safari persists

My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box. The element ...

htmlcsssvgsafariclip-path

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

Using HTML and JavaScript to verify email addresses

I have been working on an "Email Validation" code, but it seems to be malfunctioning. I can't figure out why. Would you mind taking a look at it? Thank you. I suspect that the issue lies with this line document.getElementById("custEmail").onchange = ...

javascripthtmlxhtmlemail-validation

Margin discrepancies when using em units

Currently, I am utilizing an em-based margin for items within a menu that are homogeneous in terms of markup, class, and id. It appears that the margins for each of these items should be rendered the same. However, some are displaying as 1px while others a ...

htmlcss

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4

Animate your SVG with CSS using hover effects that originate from the center of the SVG

I successfully implemented this animation using GSAP and you can view the Codepen for reference: https://codepen.io/whitelionx/full/vYGQqBZ const svgs = document.querySelectorAll("svg"); svgs.forEach((svg) => { const tl = gsap .timelin ...

cssanimationsvghover

What is the best way to eliminate the right margin from my div element?

On my contact page, there's a div with the ID of contactdetails that appears to have a margin on the right side when viewed in Chrome's developer tools. This margin is causing some layout issues, specifically preventing me from placing the Google ...

htmlcss

The dimensions of the bottom border on left floating divs are inconsistent

One of my designers frequently uses a particular technique in various designs, and I'm struggling to determine the most effective way to style it with CSS so that it fluidly adapts (as it will be incorporated into a CMS). Essentially, when implementi ...

htmlcsscss-float

"Learn the process of customizing the border color of a drop-down menu using

Is there a way to add validation to a drop-down menu so that the border color turns red if an option is not selected? $("#MainContent_ddlSuppliers option:selected'").css("border", "1px solid #F78181"); ...

jquerycssdrop-down-menucolors

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Tips for choosing an image using jQuery from an external HTML page

I'm attempting to embed an HTML page within a div and then individually select all the img tags within that page to display an overlay div on top of the images. Currently, I can insert the HTML into a div named "asd" and it seems like the jQuery is f ...

javascriptjqueryhtml

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge o ...

cssreactjsnext.js3dspline

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

javascriptphpjqueryhtmlajax

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Why does the page close on the second tap instead of the first tap when using an iPhone? The image changes on tap but doesn't close as expected. $("#privacy-close-btn").mouseenter(function() { $("#privacy-close-btn").css("display", "none"); $(" ...

jqueryhtmlcssiphone

How come my image is not aligned to the right of the header in my HTML code?

My attempt to align an image to the right side of my heading using code was unsuccessful. Here is the HTML snippet I used: /* Aligning with CSS */ #colorlib-logo img { display: flex; align-items: center; width: 30px; height: 30px; } #colorli ...

htmlcsshorizontal-alignment

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

javascriptjquerycsscolors

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

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 ...

javascripthtmlcsspython-3.xdjango-rest-framework

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...

cssreactjs

Tips for calculating the canvas-relative mouse position on a CSS 3D transformed canvas

Recently decided to challenge myself by experimenting with drawing on 3D transformed canvases. After some trial and error, I managed to get it partially working. const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) =& ...

javascripthtmlcsscanvascss-transforms

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass