如何移除箭头样式面包屑（Breadcrumbs）的最后一条边框？

Got it, let's tackle this—you need to get rid of that right-side border/arrow on the last item in your arrow-style breadcrumb (white background with blue border), matching the attached image. Let's fix this step by step:

First, let's assume your breadcrumb HTML structure looks like this (super common for arrow breadcrumbs): #

<div class="breadcrumb">
  <ul>
    <li><span>Home</span></li>
    <li><span>Category</span></li>
    <li><span>Product Detail</span></li>
  </ul>
</div>

Here's the adjusted CSS (I filled in missing padding details and added the key fix): #

.breadcrumb ul {
  padding: 0;
  font-size: 0;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #0174DF;
  position: relative; /* Helps position arrow pseudo-elements correctly */
}

.breadcrumb li {
  display: inline-block;
  position: relative; /* Required for arrow pseudo-elements */
}

.breadcrumb li span {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  background: #ffffff;
  text-decoration: none;
  color: black;
  padding: 10px 20px; /* Adjust this to match your original padding */
}

/* Add arrows ONLY to items that aren't the last one */
.breadcrumb li:not(:last-child) span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ffffff;
  z-index: 1; /* Ensures white arrow covers the blue border arrow */
}

.breadcrumb li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #0174DF;
}

/* Critical fix: Remove arrow/border from the last item */
.breadcrumb li:last-child span {
  padding-right: 20px; /* Match left padding for consistent spacing */
}

How this works: #

• We use the :not(:last-child) selector to apply arrow styles only to items that aren't the final one—so the last item never gets that right-side arrow/border in the first place.
• The z-index on the white arrow ensures it sits on top of the blue border arrow, creating that clean "cut-through" look for the breadcrumb.
• Adjust the padding and arrow size values (like 10px) to match your original design's dimensions.

If your arrow implementation uses a different method (like border-right instead of pseudo-element triangles), the core idea stays the same: target the last item with li:last-child and remove the unwanted border/arrow styles.

内容的提问来源于stack exchange，提问作者gyanendra