Css 在h2后面加下划线

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

在下面的例子中，最好的方法是什么

H2_u_u

---

lorem lorem

如果不添加标记，我想不出任何方法来实现这一点

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

---

如果不添加标记，我想不出任何方法来实现这一点

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

---

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

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


 <h2>Test</h2>

h2:after{
颜色：黑色；
内容：“\uuuuuuuuu”
}
试验

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

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


 <h2>Test</h2>

h2:after{
颜色：黑色；
内容：“\uuuuuuuuu”
}
试验

您可以尝试使用CSS的

：在

功能之后（尽管我以前没有见过它用于这类事情）：

正如我所说，我以前没有见过这样使用的

：after

，但我刚刚测试了上面的代码，它对我有效，至少在Firefox中是如此

但是请注意，它在旧版本的IE中肯定不起作用，因此如果您需要100%的跨浏览器解决方案，您可能需要做其他事情（这基本上意味着添加额外的标记）

---

这个页面有更多关于

之后的信息：
你可以尝试使用CSS的
:after
功能（尽管我以前没有见过它用于这类事情）：

正如我所说，我以前没有见过这样使用的
：after
，但我刚刚测试了上面的代码，它对我有效，至少在Firefox中是如此

但是请注意，它在旧版本的IE中肯定不起作用，因此如果您需要100%的跨浏览器解决方案，您可能需要做其他事情（这基本上意味着添加额外的标记）

本页在

之后有关于

的更多信息：
如果你是说在
下面，那么只需在CSS中添加一个
边框底部：1px纯红就足够了

如果您的意思是在标题文本之后，请尝试以下操作：

HTML

另一种适用于支持
：after
的浏览器的方法是使用CSS生成“\ux”

请参见此处的两个示例：
如果您的意思是在
下面，那么只需在CSS中添加
边框底部：1px纯红就足够了

如果您的意思是在标题文本之后，请尝试以下操作：

HTML

另一种适用于支持
：after
的浏览器的方法是使用CSS生成“\ux”

请参见此处的两个示例：
您的示例不起作用<代码>填充
不能应用于内联元素，如
，除非先给它一个
显示：块
你把
填充
和
边距
搞混了。可以为内联元素提供填充。这就是我选择它的原因。@Moin-
display:inline block
将允许您使用内联类型元素，但具有块级功能，因此您可以绕过此类问题。只有向左和向右填充才会对内联元素产生影响。请参阅：是的，但同样，这就是我使用左填充的原因。这个例子很可靠，很实用。你的例子行不通<代码>填充
不能应用于内联元素，如
，除非先给它一个
显示：块
你把
填充
和
边距
搞混了。可以为内联元素提供填充。这就是我选择它的原因。@Moin-
display:inline block
将允许您使用内联类型元素，但具有块级功能，因此您可以绕过此类问题。只有向左和向右填充才会对内联元素产生影响。请参阅：是的，但同样，这就是我使用左填充的原因。此示例非常可靠且功能强大。在此示例中，“内容”也可以是空字符串。在此示例中，“内容”也可以是空字符串。感谢Moin和所有其他…此解决方案适用于我：）感谢Moin和所有其他…此解决方案适用于我：）
<h2 class="underline"><span>lorem ipsum</span></h2>

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*/