如何为标题标题添加部分边框？ [复制]

Question

我必须在标题文本中添加一个时尚的边框，如下所示：

但我不知道该怎么做。

我用border-bottom 尝试了下面的代码，但看起来不太好。

h1 {
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
}

<h1>Navigation</h1>

Answer 1

您可以使用位于border-bottom 上方的伪元素：

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid orange;
  width: 25%;
  position: relative;
  bottom: -6px; /* your padding + border-width */
}

<h1>Navigation</h1>

使用这样的伪元素可以很容易地添加动画。可能在将鼠标悬停在页面的某个部分上时为边框设置动画：

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

h1::after {
  content: "";
  display: block;
  border-bottom: 2px solid orange;
  width: 0;
  position: relative;
  bottom: -7px; /* your padding + border-width */
  transition: width .6s ease;
}

.section:hover h1::after {
  width: 25%;
}

<div class="section">
  <h1>Navigation</h1>

  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet accumsan odio, sit amet molestie tortor ultricies vel. Donec nibh purus, fermentum eget dolor ac, tincidunt scelerisque urna. Ut gravida id eros sed placerat. Etiam vel mi erat. Etiam rhoncus massa ultricies quam malesuada pretium. Fusce elementum diam in turpis rutrum auctor. Vestibulum venenatis bibendum euismod. Praesent ex justo, blandit non urna et, porta interdum enim.
  </p>
</div>

Answer 2

带有伪元素和线性渐变

h1 {
  font-size: 30px;
  color: #000;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  bottom: 0;
  margin-bottom: -.5em;
  background: linear-gradient(to right, gold 15%, grey 15%, grey);
}

<h1>Navigation</h1>

Answer 3

您可以使用渐变和背景尺寸

h1 {
  font-size:30px;
  color:#000;
  background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
  background-size:100% 3px;/* here set thickness */
  padding-bottom:5px;
}

<h1>Navigation</h1>

Answer 4

我更进一步，使标题看起来更像参考图像。我使用的背景图片创意与 G-Cyr 在他的 answer 中所做的相同。
注意这两个背景。 background 和 background-size 属性中的第一组值是底线；第二组是背景色。

h1 {
  background: linear-gradient(to right, #E6831D 20%, #FFF 20%) bottom .5em left .8em no-repeat, linear-gradient(#323A45, #323A45);
  background-size: 100% 1px, 100% 100%;
  padding: .8em;
  color: #FDFFFE;
  font-size: 30px;
  font-family: sans-serif;
  font-weight: lighter;
}

<h1>Awesome Heading</h1>

Answer 5

其中一种方法是添加具有所需宽度的h1::after - 并具有不同的边框颜色。

h1 {
    font-size: 30px;
    color: #000;
    border-bottom: 1px solid #FFEB3B;
    padding-bottom: 5px;
    POSITION: relative;
}

h1:after {
    display: block;
    border-bottom: 1px solid red;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 5em;
}

<h1>Navigation</h1>

Answer 6

尝试使用:after伪选择器

h1 {
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  position: relative;
}
h1:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 1px;
  background: red;
  left: 0;
  bottom: -1px;
}

<h1>Navigation</h1>

Answer 7

您可以探索的一种方法是使用pseudo-elements。

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  position: relative;
}

h1:after {
  content: "";
  width: 100px;
  height: 1px;
  background: orange;
  position: absolute;
  bottom: -1px;
  left: 0;
}

<h1>Navigation</h1>

Answer 8

您必须使用伪选择器:before 来添加该边框，h1 是一个block element，因此您甚至需要添加width 来自定义该边框的长度，否则它将是 100% h1 宽度.

h1{
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  position:relative;
}
h1:before{
  content:"";
  bottom:-1px;
  left:0;
  border-bottom:1px solid brown;
  position:absolute;
  z-index:9;
  width:50%;
}

<h1>Navigation</h1>

Answer 9

利用:after 和:before 伪元素来获得准确的输出。将它们设置在absolute 中定位。查看下面的 sn-p 以供参考。

h1 {
  font-size: 30px;
  color: #000;
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
}

h1:before {
  content: "";
  width: 100%;
  height: 3px;
  background: #ccc;
  position: absolute;
  bottom: 0;
}

h1:after {
  content: "";
  width: 50%;
  height: 3px;
  background: red;
  display: block;
  position: absolute;
  bottom: 0;
}

<h1>Navigation</h1>