html - 在 bootstrap 4 中隐藏顶部边框

Question

我正在尝试使用 bootstrap 4 卡片元素构建简单的定价表，但我找不到一个问题的解决方案。

  .card {
    border: 0;
    border-radius: 0px;
    -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
    transition: all .3s ease-in-out;
    padding: 2.25rem 0;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      border: 3px solid $primary-color;
      transition: 0.5s;
    }

    &:hover {
      transform: scale(1.05);
      -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
      box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);

      &:after {
        border: 3px solid $primary-color;
        width: 100%;
      }

Live Codepen

这是负责在悬停时在表格顶部绘制线条的代码。问题是我不知道如何隐藏每个表左上角的这个绿色小矩形。一旦客户悬停表格，我试图将边框设为白色并更改为绿色。它有效，但随后可见淡入淡出效果。我宁愿保持它现在的样子，只是以某种方式摆脱这个矩形。

Answer 1

删除 :after 的边框并添加 height: 3px相反，还从 :after 中删除边框在 :hover

   .card {
        border: 0;
        border-radius: 0px;
        -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
        box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
        transition: all .3s ease-in-out;
        padding: 2.25rem 0;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 3px;
          background: $primary-color;
          transition: 0.5s;
        }

        &:hover {
          transform: scale(1.05);
          -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
          box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);

          &:after {
            width: 100%;
          }