如何向标题标题添加部分边框？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

• Border length smaller than div width? 10 answers
• 边长小于div宽度？ 10个答案

I have to add a stylish border in the header text like this:

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

but I'm not sure how to do it.

但我不知道该怎么做。

I tried the below code with border-bottom but it does not look good.

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

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

<h1>Navigation</h1>

9 个解决方案

#1

You could use a pseudo element positioned over the border-bottom:

您可以使用位于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>

Using a pseudo element like this makes it very easy to add animation. Perhaps to animate the border when hovering over a section of the page:

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

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>

#2

With a pseudo-element and a linear-gradient

使用伪元素和线性渐变

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>

#3

You can use a gradient and background-size

您可以使用渐变和背景大小

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>

#4

I took it a little further and made the heading look more like the reference image. I'm using the same background image idea as G-Cyr did in his answer.
Note the two backgrounds. The first set of values in the background and background-size attributes are what make the bottom line; the second set is for the background color.

我进一步采取了它，使标题看起来更像参考图像。我使用的是与G-Cyr在答案中所做的相同的背景图像。请注意两个背景。背景中的第一组值和背景大小属性构成了底线;第二组用于背景颜色。

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>

#5

One of the ways of doing so would be to add h1::after with required width - and having a different border color.

这样做的一种方法是添加具有所需宽度的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>

#6

Try using :after pseudo selector

尝试使用：伪选择器后

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>

#7

One method you could explore is using 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>

#8

You have to use pseudo selector :before to add that border, h1 is a block element thus you even need to add width to customize the length of that border or else it will be 100% h1 width.

您必须使用伪选择器：在添加该边框之前，h1是一个块元素，因此您甚至需要添加宽度来自定义该边框的长度，否则它将是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>

#9

Make use of :after as well as :before pseudo elements to get exact output. Set them in absolute positioned. Check below snippet for reference.

利用：after以及：之前的伪元素来获得精确的输出。将它们设置在绝对位置。请查看以下代码段以供参考。

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>