使用css after伪元素构造分割线

最新推荐文章于 2023-08-20 12:23:24 发布

inthendooo

最新推荐文章于 2023-08-20 12:23:24 发布

阅读量7k

点赞数 2

本文链接：https://blog.csdn.net/invitesun/article/details/16369957

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

测试地址：

http://www.w3school.com.cn/tiy/t.asp?f=csse_background

<html>
<head>
<style type="text/css">
.header-block {
   float:left;
   min-width:250px
}
.header-block:after {
    background-color: #606060;
    bottom: 0;
    content: "";
    display: block;
    left: 250px;
    position: absolute;
    top: 0;
    width: 1px;
}
</style>
</head>

<body>
<div class="header-block">
菜单
</div>
<div class="main-block">
内容
</div>
</body>

</html>