如何使用css制作双色单边框？

Question

实际上，我需要帮助才能使单边框双色。它表示使用CSS的单行25％的红色和其他75％的蓝色。

我的非工作代码：

element { 
  border-bottom:2px solid red;
  position:relative;
  z-index:999;
  opacity:1;

我认为可以通过:before和:after伪元素来实现。

Answer 1

HTML：

<div class="element"></div>

CSS：

.element {
    border-bottom: 2px solid #00f;
    position: relative;
}

.element::before {
    background-color: #f00;
    content: "";
    height: 2px;
    position: absolute;
    width: 25%;
}

演示： JSFiddle