鍍金池/ 問(wèn)答/HTML/ 為什么position的值會(huì)影響after元素的顯示？

為什么position的值會(huì)影響after元素的顯示？

有一段代碼，結(jié)果是要顯示一行文字和一條下劃線，如下所示

clipboard.png

代碼如下

<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>

我對(duì).header和.header:after中的position屬性的作用不理解
1、如果把.header的position去掉，則下劃線不顯示
2、如果把.header的position換成absolute，則下劃線顯示一小部分
3、如果把.header:after中的position去掉或換成relative，下劃線不顯示
請(qǐng)問(wèn)以上效果的原因是什么？

回答
編輯回答
疚幼
  1. .header的position，下劃線的定位基準(zhǔn)就是body了，其實(shí)不是不顯示，而是顯示到底部去了
  2. 把.header的position換成absolute，.header變?yōu)閮?nèi)容的寬+padding的寬，下劃線就是他們的寬度
  3. 把.header:after中的position去掉，那么就是文本塊了，設(shè)置的top,left,height都不起作用了，就是一個(gè)空白
2017年8月6日 13:55
編輯回答
毀了心

after偽類相當(dāng)于一個(gè)inline元素，寬度根據(jù)內(nèi)容拉伸，content里面沒(méi)有內(nèi)容，所以他的寬度為0，下劃線不顯示；設(shè)置position為absolute時(shí)，因?yàn)樵O(shè)置了left: 0; right: 0; 它會(huì)拉伸到和父級(jí)元素同等的寬度。

2017年5月17日 08:35