为什么position的值会影响after元素的显示？

发布于
2018-03-07

新手上路，请多包涵

有一段代码，结果是要显示一行文字和一条下划线，如下所示

代码如下

<head>  
<style type="text/css">  
    .header {
  padding: 14px 15px 10px;
  color: #999999;
  font-size: 13px;
  position: relative;

}
.header:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #E5E5E5;
  color: #E5E5E5;
  left: 15px;
}

</style>  
<body>
    <div class="header">列表</div>
</body>

我对.header和.header:after中的position属性的作用不理解
1、如果把.header的position去掉，则下划线不显示
2、如果把.header的position换成absolute，则下划线显示一小部分
3、如果把.header:after中的position去掉或换成relative，下划线不显示
请问以上效果的原因是什么？

css html

阅读 2.9k

2 个回答

得票最新