如何为标题标题添加部分边框？

Question

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

但我不确定该怎么做。

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

＆＃13;

＆＃13;

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

＆＃13;

<h1>Navigation</h1>

＆＃13;

＆＃13;

＆＃13;

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位置。请查看下面的代码段以供参考。

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>