每个< h1>下的水平线/线CSS中的标题 [英] Horizontal rule/line beneath each <h1> heading in CSS
问题描述
我正在尝试自动将100％水平线（规则）放置在
I am trying to place a 100% horizontal line (rule) automatically beneath every instance of an
<h1>
使用CSS的标题标签。
header tag using CSS.
示例
--- snip 8< ---
--- snip 8< ---
简介
---剪8 ; ---
--- snip 8< ---
我在CSS中有此文件：
I have this in my CSS:
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
而且我在主HTML页面中有此内容：
And I have this in my main HTML page:
<body class="mypage">
<h1><span class="headline">Introduction</span></h1>
我不知道如何在每次使用标题类的下方显示水平线。
I cannot figure out how to have a horizontal line appear beneath every use of the headline class.
推荐答案
您也可以尝试使用Pseudoclass ：after。。我已经在我的一个应用程序中使用了这种样式。
You can also try using Pseudoclass :after. . I have used this kind of styling in one of my applications.
h1:after
{
content:' ';
display:block;
border:2px solid black;
}
您可以整理一些样式，例如：- http://jsfiddle.net/5HQ7p/
You can tidy up little more to style something like this:- http://jsfiddle.net/5HQ7p/
h1:after {
content:' ';
display:block;
border:2px solid #d0d0d0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
这篇关于每个< h1>下的水平线/线CSS中的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
