Как я могу показать нижнюю границу, сохраняя overflow-x: скрытым?

Question

Как я могу показать нижнюю границу на li внутри элемента ul, сохраняя горизонтальное переполнение скрытым. Ниже приведен пример того, что я сейчас имею (и не хочу):

Это мой текущий код (ul динамически генерируется Ruby)

<div class="breadcrumbs">
    <div class="row breadcrumbs--row">
      <div class="col-xs-12">
          <ul class="list--inline">
            <% @breadcrumbs.each_with_index do |(title, url), i| %>
              <!--<%= '»' if i > 0 %>-->
              <li> <%= '>' if i > 0 %> <a class="breadcrumbs--title" href="<%= url %>" title="<%= title %>"><%= title %></a></li>
            <% end %>
          </ul>
      </div>
    </div>
  </div>

И мой CSS:

.breadcrumbs--row {
  border-bottom: 2px solid #e2e2e2;
  margin-left: -20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  width: calc(100% + 40px);
}
.breadcrumbs ul {
  text-align: right;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  direction: rtl;
  position: relative;
}
.breadcrumbs ul:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 10%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.breadcrumbs ul li {
  display: inline;
}
.breadcrumbs ul li a {
  text-decoration: underline;
  font-weight: bold;
  padding-bottom: 16px;
}
.breadcrumbs ul li:last-child a {
  font-weight: normal;
  text-decoration: none;
  border-bottom: 4px solid #f77f00;
}

Это то, чего я пытаюсь достичь, но затем с нижней границей на последней ли. (Мне нужно скрыть переполнение слева, поэтому у меня есть overflow-x: скрытый элемент ul):

Что я пробовал:

• ul {overflow-y: видимый; } (также пытался сделать это на родительском элементе и сохранить переполнение: видимый на ul).
• Поиск в Google (но это сложно. Я имею в виду, например, попытаться найти эту проблему).
• Посмотрите на примеры CodePen
• В StackOverflow искали ответ, нашли некоторые, но они либо слишком специфичны, либо не работают ( Может кто-нибудь сказать мне, почему мой overflow-x влияет на мою границу меню? , переполнение: скрыто скрытие границ, но не элемента, который переполняет )

Может кто-нибудь также объяснить мне, почему не работает то, что я пробовал?

РЕДАКТИРОВАТЬ: см. Мой пример CodePen. Пожалуйста, скопируйте код вместо прямого изменения: https://codepen.io/johnnybossboy/pen/PepwMX

Answer 1

Надеюсь, это то, что вы ищете: Ссылка на проект

Редактировать: я изменил несколько вещей, и на codepen он, кажется, работает.

/* Please scroll through code, as I have added useful comments. */
body {
  background-color: #ccc;
}

.card {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
}

a {
  color: black;
}

.breadcrumbs--row {
  border-bottom: 4px solid #e2e2e2;
  margin-left: -20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  width: calc(100% + 40px);
  height: 50px;
}
.breadcrumbs ul {
  text-align: right;
  overflow-x: hidden; /* when this is visible, the border is shown, however the text overflows the container which is  undesired behaviour */
  /* ------changed this------- */
  overflow-y: hidden; /* Tried this, did not work as you can see */
  white-space: nowrap;
  direction: rtl;
  position: relative;
  height: 50px;
}
.breadcrumbs ul:first-child:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 10%);
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 10%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.breadcrumbs ul li {
  display: inline;
}
.breadcrumbs ul li a {
  text-decoration: underline;
  font-weight: bold;
  padding-bottom: 16px;
  height: 100%;
}
.test_box{
  border-bottom: 4px solid #f77f00;
  padding-bottom: 28px;
}

.breadcrumbs ul li:last-child a {
  /* -------changed this------ */
  padding: 0;
  font-weight: normal;
  text-decoration: none;
 /* THIS IS GONE. I want to have a border on the gray line below, while keeping the overflow on the left the same. Nevermind the gray square next to the horizontal gradient. It's irrelevant for my issue and does not happen on my site. */
}