关于伪元素插入背景图
来源：5-11 编程练习
qq_慕前端7271312
2020-12-14 22:31:05
# 具体遇到的问题
老师，内容底部左侧部分插入的那个图片，我用伪元素：before插入背景图只有第一个a元素前面显示图片，其他a元素前面不显示图片，这是为什么？
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
*{
padding:0;
margin:0;
border:0;
}
a{
display:inline-block;
text-decoration: none;
cursor: pointer;
}
.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
.top {
height: 30px;
background-color: #f5f5f5;
}
.top .call{
float: left;
}
.top .welcome{
float: right;
}
.header{
height: 92px;
}
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right:0px;
top: 29px;
background:url('http://climg.mukewang.com/58c61b7e00012b9303260038.jpg') no-repeat;
}
.header .search .selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
}
.header .search .selected-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top: 36px;
z-index: 2;
}
.selected-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.selected-list a:hover{
background-color: #ebeef5;
}
.header .search .search-input{
width: 208px;
height: 26px;
position: absolute;
top: 5px;
left: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
/*导航*/
.nav{
text-align:center;
height: 36px;
line-height:36px;
background-color: #60bff2;
}
.nav a{
width:100px;
float:left;
}
.nav a:last-child{
float:right;
}
/*内容*/
.content{
margin-top:30px;
}
/*内容顶部*/
.content .top{
padding-left:20px;
height:30px;
line-height:30px;
border-bottom:2px solid #60bff2;
background:url('http://climg.mukewang.com/58c61a4f0001967a01380030.jpg') left no-repeat;
}
/*内容中间*/
.content .main{
border:1px solid #dcdddd;
border-top:none;
font-size:13px;
/*height:55px;*/
padding:10px 0 10px 10px;
overflow:hidden;
}
.hidden{
height:55px;
}
.content .main .left{
width:800px;
float:left;
}
.content .main .right{
width:100px;
height:70px;
line-height:70px;
float:right;
}
.content .main .left a{
width:70px;
height:17px;
margin-right:59px;
margin-top:10px;
}
.content .main .right a{
text-decoration:underline;
color:blue;
margin-right:20px;
}
/*内容底部*/
.content .bottom{
margin-top:20px;
}
/*内容底部左侧*/
.content .bottom .left{
width:166px;
border:1px solid #dcdddd;
margin-right:23px;
padding-left:42px;
float:left;
position:relative;
}
.content .bottom .left a{
width:120px;
margin-top:10px;
}
.content .bottom .left a::before{
content:' ';
display:block;
width:22px;
height:21px;
position:absolute;
left:10px;
top:10px;
background:url('http://climg.mukewang.com/58c61b610001c58300440638.jpg') 0px 0px no-repeat;
}
.content .bottom .left a:nth-child(2)::before{
background-position:0 -22px;
}
.content .bottom .left a:nth-child(3)::before{
background-position-y:-44px;
}
.content .bottom .left a::after{
content:'>';
display:inline-block;
width:22px;
height: 22px;
line-height:22px;
position:absolute;
right: 0;
}
/*内容底部右侧*/
.content .bottom .right{
width:762px;
border:1px solid #dcdddd;
float:right;
}
.footer{
height:30px;
line-height:30px;
text-align:center;
padding: 25px 0;
background-color: #eceef2;
}
</style>
</head>
<body>
<div class="top">
<div class="wrap">
<p class="call">
<img src="http://climg.mukewang.com/58c61b9d0001e02d00170017.png" alt="">010-114/116114电话预约
</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<!-- 头部 -->
<div class="header">
<div class="wrap clearfix">
<a class="logo" href="#">
<img src="http://climg.mukewang.com/58c61b2f0001f5c008400172.png">
</a>
<div class="search">
<div class="selected">医院</div>
<div class="selected-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="search-input" placeholder="请输入搜索内容">
</div>
</div>
</div>
<!-- 导航 -->
<div class="nav">
<div class="wrap">
<a href="">首页</a>
<a href="">按医院挂号</a>
<a href="">按科室挂号</a>
<a href="">按疾病挂号</a>
<a href="">最新公告</a>
<a href="">社会知名医院</a>
</div>
</div>
<!-- 内容 -->
<div class="content">
<div class="wrap">
<!-- 内容顶部 -->
<div class="top">热门科室</div>
<!-- 内容中间 -->
<div class="main hidden">
<div class="left">
<a href="#">神经外科</a>
<a href="#">妇科</a>
<a href="#">产科</a>
<a href="#">儿科</a>
<a href="#">骨科</a>
<a href="#">眼科</a>
<a href="#">耳鼻喉</a>
<a href="#">肿瘤外科</a>
<a href="#">肿瘤综合科</a>
<a href="#">皮肤美容</a>
<a href="#">心理咨询科</a>
<a href="#">中医科</a>
<a href="#">急诊科</a>
</div>
<div class="right">
<a href="#">展开全部</a>
</div>
</div>
<!-- 内容底部 -->
<div class="bottom clearfix">
<!-- 内容底部左侧 -->
<div class="left">
<a href="#">内科</a>
<a href="#">外科</a>
<a href="#">妇产科</a>
<a href="#">生殖中心</a>
<a href="#">儿科</a>
<a href="#">骨外科</a>
<a href="#">眼科</a>
<a href="#">口腔科</a>
<a href="#">耳鼻咽喉头颈科</a>
<a href="#">肿瘤科</a>
<a href="#">皮肤性病科</a>
<a href="#">男性学科</a>
<a href="#">皮肤美容</a>
<a href="#">烧伤科</a>
<a href="#">精神心理科</a>
<a href="#">中医科</a>
<a href="#">中西医结合科</a>
<a href="#">传染病科</a>
<a href="#">结核病科</a>
<a href="#">介入医学科</a>
<a href="#">康复医学科</a>
<a href="#">运动医学科</a>
<a href="#">麻醉医学科</a>
<a href="#">职业病科</a>
<a href="#">地方病科</a>
<a href="#">营养科</a>
<a href="#">医学影像学</a>
<a href="#">病理科</a>
<a href="#">其他科室</a>
</div>
<!-- 内容底部右侧 -->
<div class="right">
<div class="item">内科</div>
<div class="list">
<a href="#">心血管内科</a>
<a href="#">神经内科</a>
<a href="#">消化内科</a>
<a href="#">内分泌科</a>
<a href="#">免疫科</a>
<a href="#">呼吸科</a>
<a href="#">肾病内科</a>
<a href="#">血液科</a>
<a href="#">感染内科</a>
<a href="#">过敏反应科</a>
<a href="#">老年病科</a>
<a href="#">普通内科</a>
<a href="#">高压氧科</a>
</div>
<div class="item">外科</div>
<div class="list">
<a href="#">神经外科</a>
<a href="#">功能神经外科</a>
<a href="#">心血管外科</a>
<a href="#">胸外科</a>
<a href="#">免疫科</a>
<a href="#">呼吸科</a>
<a href="#">整形科</a>
<a href="#">乳腺外科</a>
<a href="#">泌尿外科</a>
<a href="#">肝胆外科</a>
<a href="#">肝肠科</a>
<a href="#">血管外科</a>
<a href="#">器官移植</a>
<a href="#">微创外科</a>
<a href="#">普外科</a>
<a href="#">脑外科</a>
<a href="#">烧伤科</a>
</div>
<div class="item">妇产科</div>
<div class="list">
<a href="#">妇科</a>
<a href="#">产科</a>
<a href="#">妇科内分泌</a>
<a href="#">妇泌尿科</a>
<a href="#">遗传咨询科</a>
<a href="#">计划生育科</a>
<a href="#">妇产科</a>
</div>
<div class="item">生殖中心</div>
<div class="list">
<a href="">生殖中心</a>
</div>
<div class="item">儿科</div>
<div class="list">
<a href="#">儿科</a>
<a href="#">新生儿科</a>
<a href="#">小儿呼吸科</a>
<a href="#">小儿营养保健科</a>
<a href="#">小儿心内科</a>
<a href="#">小儿皮肤科</a>
<a href="#">小儿精神科</a>
<a href="#">小儿外科</a>
<a href="#">小儿心外科</a>
<a href="#">小儿骨科</a>
<a href="#">小儿神经外科</a>
<a href="#">小儿康复科</a>
</div>
<div class="item">骨外科</div>
<div class="list">
<a href="#">骨科</a>
<a href="#">脊柱外科</a>
<a href="#">手外科</a>
<a href="#">创伤骨科</a>
<a href="#">骨关节科</a>
<a href="#">矫形骨科</a>
<a href="#">骨质疏松科</a>
<a href="#">骨伤专科</a>
</div>
<div class="item">眼科</div>
<div class="list">
<a href="#">眼科</a>
<a href="#">小儿眼科</a>
<a href="#">眼底</a>
<a href="#">角膜科</a>
<a href="#">青光眼</a>
<a href="#">白内障</a>
<a href="#">眼外伤</a>
<a href="#">眼眶及肿瘤</a>
<a href="#">屈光</a>
<a href="#">眼整形中医眼科</a>
</div>
<div class="item">口腔科</div>
<div class="list">
<a href="#">口腔科</a>
<a href="#">颌面外科</a>
<a href="#">正畸科</a>
<a href="#">牙体牙髓科</a>
<a href="#">牙周科</a>
<a href="#">口腔黏膜科</a>
<a href="#">儿童口腔科</a>
<a href="#">口腔修复科</a>
<a href="#">种植科</a>
<a href="#">口腔预防科</a>
<a href="#">口腔特诊科</a>
<a href="#">口腔急诊科</a>
</div>
<div class="item">耳鼻咽喉头颈科</div>
<div class="list">
<a href="#">耳鼻喉</a>
<a href="#">头劲外科</a>
</div>
<div class="item">肿瘤科</div>
<div class="list">
<a href="#">肿瘤内科</a>
<a href="#">肿瘤外科</a>
<a href="#">肿瘤妇科</a>
<a href="#">放疗科</a>
<a href="#">骨肿瘤科</a>
<a href="#">肿瘤康复科</a>
<a href="#">肿瘤综合科</a>
</div>
<div class="item">皮肤性病科</div>
<div class="list">
<a href="#">皮肤科</a>
<a href="#">性病科</a>
</div>
<div class="item">男性学科</div>
<div class="list">
<a href="#">男性学科</a>
</div>
<div class="item">皮肤美容</div>
<div class="list">
<a href="#">皮肤美容</a>
</div>
<div class="item">烧伤科</div>
<div class="list">
<a href="#">烧伤科</a>
</div>
<div class="item">精神心理科</div>
<div class="list">
<a href="#">精神科</a>
<a href="#">心理咨询科</a>
<a href="#">司法鉴定科</a>
<a href="#">双相障碍科</a>
<a href="#">药物依赖科</a>
</div>
<div class="item">中医科</div>
<div class="list">
<a href="#">中医妇产科</a>
<a href="#">中医儿科</a>
<a href="#">中医骨科</a>
<a href="#">中医皮肤科</a>
<a href="#">中医内分泌</a>
<a href="#">中医消化科</a>
<a href="#">中医呼吸科</a>
<a href="#">中医肾病内科</a>
<a href="#">中医免疫内科</a>
<a href="#">中医心内科</a>
<a href="#">中医神经内科</a>
<a href="#">中医肿瘤科</a>
<a href="#">中医血液科</a>
<a href="#">中医肝病科</a>
<a href="#">中医五官科</a>
<a href="#">中医男科</a>
<a href="#">针灸科</a>
<a href="#">中医按摩科</a>
<a href="#">中医外科</a>
<a href="#">中医乳腺外科</a>
<a href="#">中医肝肠科</a>
<a href="#">中医老年病科</a>
<a href="#">中医科</a>
<a href="#">中医内科</a>
<a href="#">中医科</a>
<a href="#">中医脾胃科</a>
<a href="#">膏方门诊</a>
<a href="#">中医骨伤科</a>
</div>
<div class="item">中西医结核科</div>
<div class="list">
<a href="#">中西医结核科</a>
</div>
<div class="item">传染病科</div>
<div class="list">
<a href="#">肝病科</a>
<a href="#">传染科</a>
</div>
<div class="item">结核病科</div>
<div class="list">
<a href="#">结核病科</a>
</div>
<div class="item">介入医学科</div>
<div class="list">
<a href="#">介入医学科</a>
</div>
<div class="item">康复医学科</div>
<div class="list">
<a href="#">康复科</a>
<a href="#">理疗科</a>
</div>
<div class="item">运动医学科</div>
<div class="list">
<a href="#">运动医学科</a>
</div>
<div class="item">麻醉医学科</div>
<div class="list">
<a href="#">疼痛科</a>
<a href="#">麻醉科</a>
</div>
<div class="item">职业病科</div>
<div class="list">
<a href="#">职业病科</a>
</div>
<div class="item">地方病科</div>
<div class="list">
<a href="#">地方病科</a>
</div>
<div class="item">营养科</div>
<div class="list">
<a href="#">营养科</a>
</div>
<div class="item">医学影像学</div>
<div class="list">
<a href="#">核医学科</a>
<a href="#">放射科</a>
<a href="#">超声科</a>
<a href="#">医学影像科</a>
</div>
<div class="item">病理科</div>
<div class="list">
<a href="#">病理科</a>
</div>
<div class="item">其他科室</div>
<div class="list">
<a href="#">急诊科</a>
<a href="#">特色医疗科</a>
<a href="#">干部诊疗科</a>
<a href="#">重症监护室</a>
<a href="#">特诊科</a>
<a href="#">检验科</a>
<a href="#">预防保健科</a>
<a href="#">功能检查科</a>
<a href="#">全科</a>
<a href="#">体检科</a>
<a href="#">血透中心</a>
<a href="#">实验中心</a>
<a href="#">碎石中心</a>
<a href="#">变态反应科</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Copyright © 2017慕课网版权所有
</div>
<script>
//此处填写jQuery代码
</script>
</body>
</html>
2回答
-
同学你好，修改一下结构，就可以使用JQuery实现了。因为JQuery不能获取伪元素，所以图标可以使用i标签实现。例如（下方截图只是一部分，剩下的同学补全就可以了）：
祝学习愉快~
0 -
好帮手慕言
2020-12-15
同学你好，伪元素设置的是绝对定位，其父级a元素没有设置定位，类名为left的元素设置了相对定位，所以伪元素是相对于类名为left的元素定位的，伪元素的偏移值都一样，所以叠压在一块了。
建议：给a标签设置定位，让伪元素相对于其父级a元素定位，再调整一下位置，例如：
祝学习愉快~
0h020-12-15
相似问题