通常hover后面跟的选择器，都是在myClass结构之下 的dom元素。

如果想在myClass下添加after等，就需要两个：：号。

注：after/before是属于myclass的下级元素，并不是同级

.myClass:hover::after{

  content: '';

  display: block;

  background: url(../images/category_icon/forbid_red.png) no-repeat 14px 15px;

  height: 30px;

  width: 30px;

  background-size: 15px;

}

关于hover和after、before合用的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  3. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  4. 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...

  5. jQuery中多个元素的Hover事件

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...

  6. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  7. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://blog.snsgou.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...

  8. Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...

  9. css实现了hover显示title的效果

    <div data-title="hello, world">hello...</div> <style> div { position: re ...

随机推荐

  1. 精读JavaScript模式(四)，数组，对象与函数的几种创建方式

    一.前言 放了个元旦,休息了三天,加上春运抢票一系列事情的冲击,我感觉我的心已经飞了.确实应该收收心,之前计划的学习任务也严重脱节了:我恨不得打死我自己. 在上篇博客中,笔记记录到了关于构造函数方面的 ...

  2. snmp自定义OID与文件下载----服务器端配置

    客户端使用命令工具:snmpwalk 服务端开启服务 snmp service.下载安装 net-snmp. 最近做了一些工作,记性较差感觉还是记下来比较好,毕竟网上能查到的有用的资料太少了. 自定义 ...

  3. Animate.css(一款有意思的CSS3动画库)

    官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...

  4. [转]ionic3 实现android版本打包

    本文转自:https://blog.csdn.net/weixin_39461487/article/details/79387250?utm_source=blogxgwz0 版权声明:本文为博主原 ...

  5. spring cloud config安全

    前面两篇介绍了spring cloud config服务端和客户端的简单配置,本篇介绍如何保护config server及对应config client修改. 保护config server,主要是使 ...

  6. c# 过滤html

    public static string StripHTML(string html) { try { System.Text.RegularExpressions.Regex regex1 = ne ...

  7. Java开发中json使用，各对象与json相互转换

    Json:一种网络通信使用的数据格式,因为便于解析,比较流行,对象可以转为json,同样json也可以转对象. 下面介绍下Json工具的简单使用(fastjson && jackson ...

  8. JavaScript函数箭头的优势在哪里

    译者按: 看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本 ...

  9. App里面如何正确显示用户头像

    1.说明,一般用户头像在上传的时候都会处理为正方形,如果没有处理该怎么正确显示用户头像呢?解决方案:用css强制 在线地址移动端:戳这里 <div class="main-meimg& ...

  10. css中那些属性可以被继承

    主要的有: 字体相关:line-height, font-family, font-size, font-style, font-variant, font-weight, font 文本相关: le ...