CROSP CROSP - 3 months ago 7
CSS Question

Border bottom full width with padding

I am trying to achieve consistent border for each list item, but as far as I have nested list I implemented nesting using paddings.

And I have following result, this is quite normal behavior.

enter image description here

Here is 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; }
.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;
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 {
padding-left: 0; }
.accordion-list--level-1 {
padding-left: 10px; }
.accordion-list--level-2 {
padding-left: 20px; }


HTML Structure

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


How can I achieve full width of bottom border ?

Answer

instead padding, you may use 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>

https://jsfiddle.net/1to3cLfr/4/

Comments