css - h2 后加下划线

Question

我真的不知道如何在标题后添加下划线!

CSS 下例的最佳方式是什么？

H2___

洛伦姆洛伦姆

Answer 1

如果你的意思是低于 <h2>然后只需添加一个 border-bottom:1px solid red在你的 CSS 中应该足够了。

如果你的意思是在标题文本之后，那么试试这个:

HTML

<h2 class="underline"><span>lorem ipsum</span></h2>

CSS

h2.underline { padding-right:20px; border-bottom:1px solid red; position:relative; }
h2.underline span { display:block; border-bottom:1px solid white; position:absolute; bottom:-1px } /*border color must be same as background color. assumed here to be white*/ 

另一种适用于支持 :after 的浏览器的方法就是用CSS生成“_”。

请在此处查看两个示例:http://jsbin.com/uyoda5/2