fix: 💄 List footer border (#22771)

bug screenshot: https://user-images.githubusercontent.com/507615/77983664-28eedd00-7342-11ea-8bd4-4dad98f757c0.png

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -643,12 +643,17 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
 `;
 
 exports[`renders ./components/list/demo/simple.md correctly 1`] = `
-<div>
-  <h3
-    style="margin-bottom:16px"
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
   >
-    Default Size
-  </h3>
+    <span
+      class="ant-divider-inner-text"
+    >
+      Default Size
+    </span>
+  </div>,
   <div
     class="ant-list ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
@@ -738,12 +743,17 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
         Footer
       </div>
     </div>
-  </div>
-  <h3
-    style="margin:16px 0"
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
   >
-    Small Size
-  </h3>
+    <span
+      class="ant-divider-inner-text"
+    >
+      Small Size
+    </span>
+  </div>,
   <div
     class="ant-list ant-list-sm ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
@@ -798,12 +808,17 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
         Footer
       </div>
     </div>
-  </div>
-  <h3
-    style="margin:16px 0"
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
   >
-    Large Size
-  </h3>
+    <span
+      class="ant-divider-inner-text"
+    >
+      Large Size
+    </span>
+  </div>,
   <div
     class="ant-list ant-list-lg ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
@@ -858,8 +873,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
         Footer
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/list/demo/vertical.md correctly 1`] = `

components/list/demo/simple.md

@@ -22,7 +22,7 @@ If a large or small list is desired, set the size property to either large or sm
 Customizing the header and footer of list by setting `header` and `footer` property.
 
 ```jsx
-import { List, Typography } from 'antd';
+import { List, Typography, Divider } from 'antd';
 
 const data = [
   'Racing car sprays burning fuel into crowd.',
@@ -33,8 +33,8 @@ const data = [
 ];
 
 ReactDOM.render(
-  <div>
-    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+  <>
+    <Divider orientation="left">Default Size</Divider>
     <List
       header={<div>Header</div>}
       footer={<div>Footer</div>}
@@ -46,7 +46,7 @@ ReactDOM.render(
         </List.Item>
       )}
     />
-    <h3 style={{ margin: '16px 0' }}>Small Size</h3>
+    <Divider orientation="left">Small Size</Divider>
     <List
       size="small"
       header={<div>Header</div>}
@@ -55,7 +55,7 @@ ReactDOM.render(
       dataSource={data}
       renderItem={item => <List.Item>{item}</List.Item>}
     />
-    <h3 style={{ margin: '16px 0' }}>Large Size</h3>
+    <Divider orientation="left">Large Size</Divider>
     <List
       size="large"
       header={<div>Header</div>}
@@ -64,7 +64,7 @@ ReactDOM.render(
       dataSource={data}
       renderItem={item => <List.Item>{item}</List.Item>}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/list/style/index.less

@@ -155,11 +155,15 @@
     border-bottom: 1px solid @border-color-split;
   }
 
+  &-split&-empty &-footer {
+    border-top: 1px solid @border-color-split;
+  }
+
   &-loading &-spin-nested-loading {
     min-height: 32px;
   }
 
-  &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
+  &-split&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
     border-bottom: 1px solid @border-color-split;
   }