创建 HTML
- 将标题文本放在 <h1> 元素中。
<h1>Welcome!</h1>
添加 CSS
- 将标题的字体和字体大小与 font-family 和 font-size 属性一起放置。
- 将标题与 text-align 属性的“center”值居中对齐。
- 使用 margin 属性在标题周围创建空间。
- 我们将通过 ::before 伪元素在标题前添加一行，然后指定文本的颜色。
- 放置内容属性，该属性始终与 ::before 和 ::after 伪元素一起使用以在元素内生成内容。
- 根据文本设置线条的高度和宽度。
- 我们可以使用 background 属性为线条指定颜色。
- 使用 top 和 left 属性定义线的顶部和左侧位置。
- 要设置 ::after 伪元素的样式，请使用与上面相同的属性。只需要设置 right 属性而不是 left 属性。
h1 {
font-family: sans-serif;
margin: 100px auto;
color: #228B22;
text-align: center;
font-size: 30px;
max-width: 600px;
position: relative;
}
h1:before {
content: "";
display: block;
width: 120px;
height: 2px;
background: #000;
left: 0;
top: 50%;
position: absolute;
}
h1:after {
content: "";
display: block;
width: 120px;
height: 2px;
background: #000;
right: 0;
top: 50%;
position: absolute;
}
现在让我们将整个代码放在一起并尝试一些示例。
在标题文本前后添加行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
font-family: sans-serif;
margin: 100px auto;
color: #228B22;
text-align: center;
font-size: 30px;
max-width: 600px;
position: relative;
}
h1:before {
content: "";
display: block;
width: 130px;
height: 5px;
background: #191970;
left: 0;
top: 50%;
position: absolute;
}
h1:after {
content: "";
display: block;
width: 130px;
height: 5px;
background: #191970;
right: 0;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Welcome to onitroad!</h1>
</body>
</html>
如果希望线条更接近文本，则需要更改左右位置。
在文本前后添加水平线的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
font-family: sans-serif;
margin: 100px auto;
text-align: center;
color: black;
font-size: 40px;
max-width: 600px;
position: relative;
}
h1:before {
content: "";
display: block;
width: 150px;
height: 5px;
background: #CD5C5C;
left: 85px;
top: 50%;
position: absolute;
}
h1:after {
content: "";
display: block;
width: 150px;
height: 5px;
background: #CD5C5C;
right: 85px;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
我们想让页面的标题具有原创性和吸引力的风格，但我们不知道如何做？
阅读此代码，我们将学会在标题前后添加行。
我们可以通过使用 ::before 和 ::after 伪元素来获得这样的效果。
让我们一起一步一步来。
日期：2020-06-02 22:14:55 来源：oir作者：oir