gpt4 book ai didi

html - CSS 中每个

标题下方的水平线/线

转载 作者:技术小花猫 更新时间:2023-10-29 12:05:36 25 4
gpt4 key购买 nike

我试图在每个实例下面自动放置一条 100% 的水平线(标尺)

 <h1>

使用 CSS 的 header 标签。

我希望看到的示例:

--- 剪辑 8< ---

简介


--- 剪辑 8< ---

我的 CSS 中有这个:

.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}

我的主要 HTML 页面中有这个:

<body class="mypage">
<h1><span class="headline">Introduction</span></h1>

我不知道如何在每次使用标题类时都显示一条水平线。

最佳答案

您也可以尝试使用伪类 :after. .我在我的一个应用程序中使用过这种样式。

http://jsfiddle.net/ffmFQ/

h1:after
{
content:' ';
display:block;
border:2px solid black;
}

您可以稍微整理一下以设计如下样式:- 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);
}

关于html - CSS 中每个 <h1> 标题下方的水平线/线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16073323/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com