css标题两边小图标或者圆点
文章描述：
css标题两边小圆点或者小图标自适应标题文本宽度
给标题两边加圆点或者小图标是为了使标题更好看，让标题两边的图标圆点随着文字宽度自动增加，我们可以采用标签伪元素来实现！
html
标题这里没有使用h标签和p标签，因为h标签和p标签会独占一行，没法自适应宽度，我们使用span标签
<div class="title"><span>热门推荐</span></div>
<div class="title"><span>产品</span></div>
css
样式部分标题左右两边采用伪元素来实现
.title{
padding: 10px 0;
width: 100%;
text-align: center;
font-size: 0.42rem;
}
.title span{
position: relative;
}
.title span::after{
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
background: #d4c0a7;
top:50%;
margin-top: -4px;
left:-0.5rem;
}
.title span::before{
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
background: #d4c0a7;
top:50%;
margin-top: -4px;
right:-0.5rem;
}
发布时间：2022/07/14
发表评论