如何解决CSS中伪类After的内容有重复

wxrkyd 2017-11-14 09:08:35

如图片所示用After的content显示的小标，下面怎么又重复，对应的css代码如下：

#mainer>ul >li:after {

    content: '';

    display: inline-block;

    width: 15px;

    height: 15px;

    border-radius: 10px;

    position: absolute;

    background: rgba(255,255,255,1);

    top: 17px;

    left:10px;

    -webkit-box-shadow: 

        inset 2px 2px 5px rgba(125,125,125,1),  

        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  

        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),

        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);

    -moz-box-shadow: 

        inset 2px 2px 5px rgba(125,125,125,1),  

        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  

        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),

        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);

    box-shadow: 

        inset 2px 2px 5px rgba(125,125,125,1),  

        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  

        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),

        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);

}

...全文

348 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

wxrkyd 2017-11-14

打赏
举报

回复

已解决。知道问题了

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。Chrome的实施仍然落后。使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* before */ .embed .save-button:hover, .attachment .save-button:hover { opacity: 1; } /* after */ :is(.embed, .attachment) .save-button:hover { opacity: 1; } 此功能主要在未处理的标准

css3爱心动画，一个div，使用before和after伪元素，使用绝对地位及圆角属性构成一个爱心，随后添加css3动画，使其缩放，往返重复动画

CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比，其变化是革命性的，让我们看到网页样式发展的前景，让我们更具有方向感、使命感。本课程是《CSS3网页设计与制作》系列课程的1-5章内容，主要包含基本选择器、伪类、伪元素、优先级规则、服务器字体等知识点

用户提问如图，li小标样式如下：#mainer>ul>li::after { content: ''; display: inline-block; width: 15px; height: 15px; border-radius: 10px; position: absolute; background: rgba(255,255,255,1...

1.:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素。如需定位定位伪类元素在指定元素之内，需设置指定元素的定位属性，这样伪类添加的元素才会相对于指定元素定位。否则伪类元素将相对于更上一级已定位的元素定位，如果没有，则相对于浏览器窗口定位。注：行内元素只有设置了display：inline-block设置宽高才会有...

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章