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

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

但我不知道该怎么做。

我尝试了下面的代码与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> 

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伪select器之后

 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

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

 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伪元素: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>