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

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在答案中所做的相同的背景图像.
请注意两个背景.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>