.icon-size-12 {cursor: pointer;width: 16px;height: 16px;margin: 22px 30px 0 0;background-position: center;background-repeat: no-repeat;float: right;//小圆点&.unread {position: relative;&:after {content: ' ';position: absolute;right: -4px;top: -2px;width: 8px;height: 8px;background-color: red;border-radius: 4px;}}}

css 伪元素方法写小圆点相关推荐

  1. 详解CSS伪元素::marker

    ::marker介绍 ::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字.它作用在任何设置了di ...

  2. css伪元素实现 小圆点 样式——css基础积累

    最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...

  3. 利用CSS伪元素写三角形

    在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法 目录 一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...

  4. css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法

    用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...

  5. css 伪元素::after与::before的使用

    CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...

  6. css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)

    今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...

  7. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  8. 【伪类与伪元素】用CSS伪元素(以:before为例)插入图片

    [伪类与伪元素]用CSS伪元素(以:before为例)插入图片 对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...

  9. 用css伪元素制作箭头图标

    用css伪元素制作跳转箭头图标 在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...

最新文章

  1. 手把手教你 MongoDB 的安装与详细使用(二)
  2. 应用分类练手项目计划
  3. MongoDB存储文件之GridFS
  4. PHP(四)——性能优化
  5. 磊哥最近面试了好多人,聊聊我的感受!(附面试知识点)
  6. ListT清除重复某一项
  7. 争冠,在路上?还是渐行渐远?
  8. 混合非线性整数规划matlab,非线性整数规划matlab
  9. MRCP协议-提供语音识别(ASR)与语音合成服务(TTS)
  10. JavaFx界面设计【SceneBuilder版】适合初学者
  11. 如何让程序运行后不谈程序兼容性助手
  12. java基于ssm+vue+elementui楼盘房屋销售系统 前后端分离
  13. 学生用计算机怎么没音效,电脑突然没声音了
  14. 嵌套(Embeddings)
  15. 华中师范大学计算机学院校友,院部动态丨计算机学院:酸甜苦辣咸——你最pick谁...
  16. daocloud mysql_DaoCloud Services 开放 API
  17. 天津石油职业技术学院计算机网络技术专业,天津石油职业技术学院专业排名,招生专业目录(10篇)...
  18. C# Socket实现两台电脑通信(二)
  19. RoboMaster步兵机器人简介
  20. shell正则表达式提取数字

热门文章

  1. 总结技术人员为什么创业失败率高的N个观点
  2. iPhone 12系列手机成了真香机了!
  3. 王者荣耀下路怎么打?老被敌方打野针对怎么翻盘?
  4. Unity 协程回调
  5. 运维高手第八课:服务向 Kubernete 容器平台迁移必须了解的事情
  6. Linux查看CPU核心数
  7. 【动态规划】暴力摩托
  8. android多渠道打包(动态改变地址打包,只需改下版本号)
  9. uniapp导航栏自定义图标按钮/搜索|uni-app自定导航条
  10. 《如来神掌》详细攻略2