gpt4 book ai didi

html - 创建一个标题,下面有两条彩色线条

转载 作者:行者123 更新时间:2023-11-28 16:55:02 24 4
gpt4 key购买 nike

Example

<!DOCTYPE html>
<html>

<head>
<style>
div.line_header {
position: relative;
width: 10px;
display: inline-block;
}
div.line_header:before,
div:after {
content: '';
position: absolute;
height: 1px;
background: black;
top: 50%;
}
div.line_header:before {
left: -20px;
width: 20px;
background: red;
}
div.line_header:after {
right: -100px;
width: 100px;

}

</style>
</head>
<body>
<h4 style="color:red;margin-bottom:5px;">About Us</h4>
<div class="line_header">&nbsp;</div>
</body>
</html>

我想使用 css/html 重现上图中的内容。似乎无法将“关于我们”与该行对齐。运行该代码片段以查看我目前所做的事情。

最佳答案

你只需要在 ::before 元素上使用 position: absolute 因为 ::after 已经垂直对齐,没有任何位置变化.

.about-us {
background: #545454;
padding: 10px;
position: relative;
font-weight: bold;
color: #F7E01D;
font-family: tahoma;
}
.about-us::after {
content: " ";
display: block;
background: #F7E01D;
width: 25px;
height: 4px;
margin-top: 5px;
}
.about-us::before {
content: " ";
display: block;
background: white;
width: 10em;
height: 1px;
position: absolute;
top: 2em;
left: 2.5em;
margin-top: 5px;
}
<div class="about-us">About Us</div>

关于html - 创建一个标题,下面有两条彩色线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32320156/

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