如何用2种不同的颜色创建边框底部? [英] How to create border bottom with 2 different color?

问题描述

我需要用两种不同的颜色创建边框底部，如下图所示

I need to create border bottom with two different color like below picture

如何创建CSS?

推荐答案

您可以使用css伪类，即:after或:before.

You can use css pseudo classes i.e :after or :before.

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
  border-bottom: 2px solid #ccc;
}

h3:before {
  position: absolute;
  background: brown;
  height: 2px;
  content: '';
  width: 50px;
  bottom: -2px;
  left: 0;
}

<h3>Last Recent Post</h3>

您也可以使用CSS渐变:

And you can use css gradient as well:

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
}

h3:before {
  position: absolute;
  background: linear-gradient(to right, brown 50px, #ccc 50px);
  height: 2px;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
}

<h3>Last Recent Post</h3>

这篇关于如何用2种不同的颜色创建边框底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！