我遇到的问题:

　　　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. ELK-Elasticsearch 安装启动

    系统版本:Centos7 Elasticsearch:5.3.1 1:关闭SELinux [root@es local]# sed -i 's/SELINUX=enforcing/SELINUX=di ...

  2. nginx新增tcp模板

    最近在装nginx时,发现新增了tcp模板,装了一遍,现记录下来过程. 1.下载nginx源码包,并解压 2.下载tcp模板压缩包https://github.com/yaoweibin/nginx_ ...

  3. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

  4. 编辑gif

    在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...

  5. js学习之原生js实现懒加载

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Spring @Value取值为null或@Autowired注入失败

    @Value 用于注入.properties文件中定义的内容 @Autowired 用于装配bean 用法都很简单,很直接,但是稍不注意就会出错.下面就来说说我遇到的问题. 前两天在项目中遇到了一个问 ...

  7. NC 数据库操作

    一.后台数据库操作方法(private端): 1.以下为后台查询方法 BaseDAO dao = new BaseDAO();//只能在private端使用 String querySql=" ...

  8. 《修炼之道:.NET开发要点精讲》读书笔记（四）

    委托的作用:1)它允许把方法作为参数,传递给其它的模块:2)它允许我们同时调用多个具有相同签名的方法:3)它允许我们异步调用任何方法. “方法签名”指方法的参数个数.参数类型以及返回值等,具有相同签名 ...

  9. python爬虫-上期所持仓排名数据爬取

    摘要:笔记记录爬取上期所持仓数据的过程,本次爬取使用的工具是python,使用的IDE是pycharm 一.查看网页属性,分析数据结构 在浏览器中打开上期所网页,按F12或者选择表格文字-右键-审查元 ...

  10. C++ openmp并行程序在多核linux上如何最大化使用cpu

    以上代码中,#pragma omp parallel for 这一行的作用即是调用openmp的功能,根据检测到的CPU核心数目,将for (i = 0; i < 1000000000; i++ ...