Bootstrap CSS：如何在蓝色边框后添加线条（附示例）

Hey there! Let’s work through how to add a line right after a blue border using Bootstrap, building off the CSS code you already have. I’ll break this down with clear examples tailored to your elements like .gw_content_title.

Core Idea #

The cleanest way to do this without extra HTML elements is to use CSS pseudo-elements (::after) alongside Bootstrap’s styling tools—like its color system and spacing units. First we’ll set up the blue border, then use the pseudo-element to create the trailing line.

Example 1: Line to the Right of a Left Blue Border #

Say you want a thick blue left border on your title, with a horizontal line extending to the right. Here’s how to update your .gw_content_title styles:

/* Keep your original styles, add border and positioning */
.gw_content_title {
  padding: 7px;
  position: relative; /* Required for pseudo-element positioning */
  transition: background-color .3s;
  font-family: CNN, Helvetica Neue, Helvetica, Arial, Utkal, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-size: 1.0666666667rem;
  line-height: 1.375;
  
  /* Add blue left border (using Bootstrap's primary blue #0d6efd) */
  border-left: 3px solid #0d6efd;
  padding-left: 1rem; /* Add space between border and text */
}

/* Create the trailing line with a pseudo-element */
.gw_content_title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%; /* Align to the right edge of the title */
  transform: translateY(-50%); /* Vertically center the line */
  width: 5rem; /* Length of the line */
  height: 2px; /* Thickness of the line */
  background-color: #0d6efd; /* Match border color */
  margin-left: 1rem; /* Space between title and line */
}

Corresponding HTML (you can also use Bootstrap’s border-left border-primary utility classes instead of custom border CSS if you prefer):

<h2 class="gw_content_title">Your Article Title</h2>

Example 2: Short Line Below a Bottom Blue Border #

If you want a bottom blue border with a shorter line directly below it (perfect for section headers), use this approach:

.gw_content_title {
  /* Keep your original styles */
  padding: 7px;
  position: relative;
  transition: background-color .3s;
  font-family: CNN, Helvetica Neue, Helvetica, Arial, Utkal, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-size: 1.0666666667rem;
  line-height: 1.375;
  
  /* Add bottom blue border */
  border-bottom: 2px solid #0d6efd;
  padding-bottom: .75rem;
}

/* Add the shorter line below the border */
.gw_content_title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25%; /* Make this shorter than the title width */
  height: 2px;
  background-color: #0d6efd;
  transform: translateY(2px); /* Shift down to separate from the border */
}

Key Tips #

• Bootstrap Consistency: Use Bootstrap’s official color values (like #0d6efd for primary blue) to match your site’s theme. You can also swap custom border CSS for utility classes like border-primary.
• Responsive Adjustments: Hide the line on mobile with a Bootstrap media query:

  @media (max-width: 576px) {
    .gw_content_title::after {
      display: none;
    }
  }
  

• Positioning: Always set position: relative on the parent element (your .gw_content_title) so the pseudo-element’s absolute positioning works as intended.

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