如何在HTML标题两侧添加横线(方法2) Jul 7, 2019 | Modified - Jul 7, 2019 | 1 min 在上一篇文章中,我们使用其中一种方法实现了在HTML标题两侧添加横线的目的,并且总长度固定的。这次我们看看如何让横线的总长度随标题的长度而变化。 目标效果 实现代码 html css 实现效果 代码分析 总结 目标效果 可以参考我自己的博客网站https://victor2code.github.io/blog,其中的博客文章就是采用这种方式 实现代码 html <body> <div class=""> <h3>This is a title</h3> <p>test test test test test test test test test test test test test test test test test test</p> </div> </body> css <head> <style media="screen"> div{ width: 60%; margin: 0 auto; } h3,p{ text-align: center; } h3::after{ content: ""; border: 1px grey solid; width: 30px; display: inline-block; position: relative; top: -5px; left: 20px; } h3::before{ content: ""; border: 1px grey solid; width: 30px; display: inline-block; position: relative; top: -5px; left: -20px; } </style> </head> 实现效果 看效果和方法1的效果没有区别。不过在标题的宽度变化的时候,标题的左右两侧的横线一直维持在30px的宽度。 代码分析 方法1中是在HTML中新添加了一个元素并利用其边框做为横线,这里并没有在HTML中添加新的元素,而是利用了:before和:after选择器在标题的前后分别插入了一些空内容,然后利用它们的边框做为横线 ::after和:after都可以达到目的,但是为了兼容性,推荐使用两个冒号。::before也是同理 width: 30px;将每段横线的宽度固定住了,但是使用宽度的前提是display: inline-block,因为默认情况下插入的内容是display: inline;的,不可以调节宽度和位置 这里没有z-index: -1;的必要,因为横线和标题的文字没有重叠的部分 总结 这种方式比起方式1更容易理解,实现起来也更容易,我个人也觉得更美观,所以在自己的博客中采用了本方法。 欢迎在下面留言进行讨论和交流。 Disclaimer: This is a personal weblog. The opinions expressed here represent my own and not those of any entity with which I have been, am now, or will be affiliated. Please enable JavaScript to view the comments powered by Disqus.