我遇到的问题:

   div盒子标签设置了伪元素 ::after  ::before  并给这俩content内容设置了空属性,添加了背景图,发现这两个伪元素没有宽度和高度。

解决方法

   给设置伪元素的盒子的父级盒子添加position:relative;width:200px;height:200px,带有伪元素的盒子添加position:absolute;,

   然后带有伪元素的盒子有了宽度和高度.

为什么会这样?

  由于手头上有项目要写,暂时不去理解这个问题。

css伪元素 ::after ::before的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  10. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. vim 常用指令总结

    vim的好处(四大好处) vim具有大量的操作技巧,编辑能力强大且速度比其他工具快的多! (这里举个简单的小例子:将每行的前四个字母复制到每行的末尾; 将文本中的所有word替换为words; 等等很 ...

  2. Python小白自问自答

    1. 问:python怎么查看命令的含义和用法? 答:查一些简单命令的含义以及用法,直接help(命令)就行了.例如直接输入help(input),这表示查input的用法. 例子如下: help(p ...

  3. paloalto防火墙执行初始配置

    1.默认情况下,防火墙的 IP 地址为 192.168.1.1,用户名/密码为 admin/admin. 为了安全起见,在继续执行其他防火墙配置任务之前,必须更改这些设置.必须从 MGT 接口(即使计 ...

  4. SSH Config 那些你所知道和不知道的事 (转)

    原文地址:https://deepzz.com/post/how-to-setup-ssh-config.html SSH(Secure Shell)是什么?是一项创建在应用层和传输层基础上的安全协议 ...

  5. windows安装MongoDB副本集,通过Java程序实现数据的插入与查询

    我本地的环境 MongoDB 4.0 jdk 1.7.x 安装参考主要博客 https://blog.csdn.net/wanght89/article/details/77677271#commen ...

  6. Day3 -4.9!受到毕设的突然袭击,一脸蒙蔽,学习暂时停止,明晚继续

    PS:啊啊啊啊,慌张的不行,不详的预感终于爆发了,第二次毕设评图好突然,没办法了,竹径和学习突然搁置,明晚健身/建模/补更Day3,感到崩溃 ————————————————————————————— ...

  7. mactype配置

    配合 Firefox 小小设置(改了好多配置,似乎主要是修改了渲染的核心?是叫这个么?把那个Siera?删掉了,就好了)后,效果极佳,我在原有配置的基础上,加大了字重,显示更粗,更明显. 这里是原配置 ...

  8. dotNet程序员的Java爬坑之旅(三)之spring MVC篇一

    使用maven構建springMVC項目,開發工具為IDEA 一.構建Maven項目,模板為WebApp 二.在pom文件中配置SpringMvc配置(springMvc需要以來servlet ,如本 ...

  9. 什么是JavaScript原型

    JS 原型 转载自[EC前端 - JavaScript原型] 原型是JavaScript最重要的概念.同时也是初级开发者最忌惮的内容,原因在于网上很少有关于它的合理描述. 但事实上,原型很简单,你可以 ...

  10. EXCEL公式及宏

    VLOOKUP特别好用的一个用于映射的公式 1.需要根据ID找到对应的NAME 2.将可以用于映射的两列放到G,H列中(注意!用于检索的要放在相对的第一列中) 3.VLOOKUP(A2,G:H,2,F ...