<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位和伪类元素的应用（css世界中的列表框实例）</title>
<style>
.list {
400px;
margin:0 auto;
display: block;
padding: 1rem;
overflow: hidden;
position: relative;
box-shadow: 0 1px #f0f1f2;
}
.cover {
60px; height: 80px;
float: left;
margin-right: .75rem;
}
.cell { overflow: hidden; }
.title { margin: 0 0 .25rem; }
.desc { color: gray; }
.tag {
position: absolute;
right: 0; top: 0;
height: 16px;
padding: 0 .5rem 0 3px;
font: 300 12px/16px a;
background-color: #e00;
}
.tag::before {
top: 0;
content: "";
position: absolute;
left: -12px;
border- 8px 6px;
border-style: solid;
border-color: #e00 #e00 transparent transparent;
}
</style>
</head>
<body>
<a href="javascript:" class="list">
<img src="https://demo.cssworld.cn/images/6/book-cover.svg" class="cover">
<div class="cell">
<h4 class="title">标题1</h4>
<p class="desc">这是...1。</p>
</div>
<span class="tag">标签1</span>
</a>
<a href="javascript:" class="list">
<img src="https://demo.cssworld.cn/images/6/book-cover.svg" class="cover">
<div class="cell">
<h4 class="title">标题1</h4>
<p class="desc">这是...1。</p>
</div>
<span class="tag">标签1</span>
</a>
</body>
</html>