我已经创建了一个主页，但在标题结束后我想要一条线，它应该像堆栈溢出时的小阴影一样，它在标题后有一条灰线，但对我来说问题是它一直在灰线之后我无法停止，甚至谷歌 genimi 或类似的东西也没有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="index.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
</style>
</head>
<body>
<div class="header">
<h1>Pixelcyber</h1>
</div>
<script scr="index.js"></script>
</body>
</html>
body {
font-family: "Helvetica", Sans-Serif;
background-image: url("Luffy1.png");
margin: 0;
}
.header {
padding: 25px;
text-align: center;
background: #ffffff;
color: rgb(0, 0, 0);
font-size: 20px;
}
.header:after {
content: '';
display: block;
border: 3px solid #d0d0d0;
border-radius: 5px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); /* Adjust as needed */
}
.header:after {
overflow: hidden; /* Added line to clip overflowing content */
}
我尝试了这个，但它不起作用我不知道该再尝试什么
我假设您正在寻找 hr 元素，如下所示：
body {
font-family: "Helvetica", Sans-Serif;
background-image: url("Luffy1.png");
margin: 0;
}
.header {
padding: 25px;
text-align: center;
background: #ffffff;
color: rgb(0, 0, 0);
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="index.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
</style>
</head>
<body>
<div class="header">
<h1>Pixelcyber</h1>
<hr>
</div>
<script scr="index.js"></script>
</body>
</html>可以使用 css 根据您的喜好更改此 hr。