时间戳

首页 > 解决方案 > CSS边框底部仅在一侧

html - CSS边框底部仅在一侧

问题描述

我正在尝试使用 css border-bottom 属性，中间有一个圆圈。像这样的东西： 我想要什么

但是，对于第一个和最后一个圆圈，我只希望它在边界内包含在内，但它会像这样延伸到末端。 我用普通 css 尝试的结果

这是我使用的CSS：

 .horizontalLineComplete{
    width: 100%;    
    border-bottom: 4px solid #26890D;
    height:20px;
   }
  
   .horizontalLineCurrent{
    width: 70%;
    border-bottom: 4px solid #63666A;  
    height:20px;
   }

我也尝试使用 li:: before 和 ::after 选择器类，但这也没有用，它只是显示了圆圈之间的线条，但我分配的颜色不能正常工作。默认情况下它采用黑色，如下所示：我尝试使用选择器类的结果

这是我给的CSS：

li.circleComplete::before
 {
   content: "";
   flex: 1 1;
   border-bottom: 2px solid #26890D;
   margin: auto;
}

 li.circleComplete::after {
     content: "";
     flex: 1 1;
     border-bottom: 2px solid #26890D;
     margin: auto;
 }

 li.circleNext::before
 {
   content: "";
   flex: 1 1;
   border-bottom: 2px solid #63666A;
   margin: auto;
}

 li.circleNext::after {
     content: "";
     flex: 1 1;
     border-bottom: 2px solid #63666A;
     margin: auto;
 }

有人可以帮助我如何调整它，或者让我知道我是否在代码中犯了任何错误？我在 scss 的前端使用 react 和 typescript。

标签： htmlcsssass

解决方案

这是如何修复代码的解决方案之一。

$('.active').html("&#10003");

$('#goNext').on('click', function() {
    
  $('ul>li.active').removeClass('active').next('li').addClass('active');
$("ul>li.active").html("&#10003")
});
 li {
      width: 2em;
      height: 2em;
      text-align: center;
      line-height: 2em;
      border-radius: 1em;
      background: #45ad66;
      margin: 0 1em;
      display: inline-block;
      color: white;
      position: relative;
    }

    li::before{
      content: '';
      position: absolute;
      top: .9em;
      left: -4em;
      width: 4em;
      height: .2em;
      background: #45ad66;
      z-index: -1;
      transition: all 1s;
    }


    li:first-child::before {
      display: none;
    }

    .active {
      background: #3f995b;
      transition: all 1s;
    }

    .active ~ li {
      background: gray;
    }

    .active ~ li::before {
      background: #000;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

<button id="goNext">
  Go to next
</button>

更新代码

推荐阅读