在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 為什么position的值會影響after元素的顯示？

為什么position的值會影響after元素的顯示？

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

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>

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

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

after偽類相當于一個inline元素，寬度根據(jù)內容拉伸，content里面沒有內容，所以他的寬度為0，下劃線不顯示；設置position為absolute時，因為設置了left: 0; right: 0; 它會拉伸到和父級元素同等的寬度。

2017年5月17日 08:35