Question

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

下面举例说明css的最佳方法是什么？

H2_的 __

lorem lorem

Answer 1

如果您的意思是<h2>以下，那么只需在CSS中添加border-bottom:1px solid red即可。

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

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

Answer 2

如果不添加标记，我无法想到任何方法。

<h2>Lorem Ipsum<span class="post-h2"></span></h2>

然后：

.post-h2 {
    padding-left: 2em; 
    border-bottom: 1px solid black; 
}

Answer 3

在现代浏览器上，你也应该能够做到这一点，而无需额外的标记

  h2:after {
    color: black;
    content: "___" 
  }


 <h2>Test</h2>

Answer 4

您可以尝试使用CSS的:after功能（虽然我以前没有看到它用于此类事情）：

h2:after {
    content: ' ';
    border-bottom:solid black 1px; /* using border rather than underline; it's easier that way */
    width:20px; /*however long you want the underline */
    display:inline-block; /* this is required for the width parameter to work */
}

正如我所说，我之前没有看过:after这种方式，但我刚刚测试了上面的代码，它对我有用，至少在Firefox中有用。

但请注意，它肯定不会在旧版本的IE中工作，所以如果您需要100％的跨浏览器解决方案，您可能需要做其他事情（这基本上意味着增加额外的标记）。

此页面包含有关after：http://www.quirksmode.org/css/beforeafter.html

的更多信息

在h2之后强调

4 个答案: