E::before和E::after本身的作用是追加字,直接在文字后面追加链接
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #222;
text-decoration: none;
}
html,
body {
height: 100%;
}
.nav {
padding-top: 70px;
text-align: center;
}
.nav a {
position: relative;
display: inline-block;
font-size: 14px;
margin: 0 10px;
}
.nav a:after {
/* attr是一个方法,指定一个属性,可以或者属性的值 ,href获取链接地址*/
content: attr(href);
}
</style>
</head>
<body>
<div class="nav">
<a href="http://www.baidu.com/" d>首页</a>
<a href="#" >新闻资讯</a>
<a href="#" >体育资讯</a>
<a href="#" >今日看点</a>
<a href="#">更多消息</a>
</div>
</body>
</html>
当用js渲染的一些值,可以加到自定义属性中,然后用content将自定义属性的值渲染出来
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #222;
text-decoration: none;
}
html,
body {
height: 100%;
}
.nav {
padding-top: 70px;
text-align: center;
}
.nav a {
position: relative;
display: inline-block;
font-size: 14px;
margin: 0 10px;
}
.nav a:after {
content: attr(data-index);
}
</style>
</head>
<body>
<div class="nav">
<!-- 自定义属性一般前面会加data- -->
<a href="#" data-index='1'>首页</a>
<a href="#" data-index='2'>新闻资讯</a>
<a href="#" data-index='3'>体育资讯</a>
<a href="#" data-index='4'>今日看点</a>
<a href="#" data-index='5'>更多消息</a>
</div>
</body>
</html>