css before显示不出来怎么办

css before显示不出来怎么办

css before伪类元素要显示,需要设置content属性,而且要具有一定的宽高,可以设置display为inline-block和block,让元素的宽高生效。

下面以一个案例讲解:

问题:尝试给span元素添加伪类,让它前面显示正方形,但是一直不显示。

HTML:

<span class="before">
我要前缀
</span>
<p class="before">
我要前缀
</p>

CSS:(相关课程推荐:css视频教程

.before:before{
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}

显示效果:

201806071528370144155412.png

浏览器控制台:

201806071528370188184614.png

解决方法:我们可以看见页面中并没有出现before元素,这是因为伪元素要生效,必须添加 content 属性。

设置 content:""; 即可,推荐做法是用 fonticon ,content 里设置该图标的字体编码。

如果使用图片或者需要设置宽高,需要将伪类元素设置为 inline-block 或者 block ,并设置高宽。

.before:before{
content:"";
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,0,0,.3);
}

这样就可以正常显示了:

201806071528370608704970.png

201806071528370608131242.png

content属性知识扩展

content有四种可以写进去的东西:attr(attr-name)、字符串、url()/uri()、counter()

attr(attr-name), 伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值

好处:可以通过js动态改变主元素的指定属性值,这时伪元素的内容也会跟着改变,可以实现某些特殊效果,如图片加载失败用一段文字替换。

url()/uri(), 引用外部资源,例如图片;

counter(), 调用计数器,可以不使用列表元素实现序号问题。

Image placeholder
前端答疑
未设置
  11人点赞

没有讨论,发表一下自己的看法吧

推荐文章
IE浏览器页面显示不全怎么办?

快速修复浏览器方案(鉴于系统环境不同→请活学活用以下方法→根据具体情况决定做哪些)1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERN

css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css让div显示不同内容

css让div显示不同内容思路:1、使用nth-of-type伪类选择器选择不同的div;2、使用::before伪类元素添加不同内容即可。(相关课程推荐:css视频教程) Document

css图片在ie8中不显示怎么办?

css图片在ie8中不显示怎么办?css背景图片在ie8中不能显示是因为no-repeat前面缺少空格,添加一个空格,改成background:url(图片地址)no-repeat即可。代码:(相关课

花2w培训前端,出来狂面20家,被拒,我该怎么办?

今天,一个在上海花2w培训前端的妹子向我诉苦,说她5个月刚培训出来,技术好差,2周时间,狂面20家公司,没有一家抛出橄榄枝。她自己说,感觉找不到工作了,能不能给我点建议?我大概问了她一些细节。这期培训

ie加载不出css样式的原因有哪些?

ie加载不出css样式的原因有哪些?可能的原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8);2.CSS文件中未指定@charset头声明,导致IE默认使用页面编

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

nginx找不到js css文件怎么办

nginx找不到jscss文件怎么办js、css都算静态资源,之所以请求不到是因为nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。只需要更改root的配置就可以了。设置location如

css样式不兼容怎么办?

1、使用浏览器私有属性我们经常会在某个CSS的属性前添加一些前缀,比如-webkit-,-moz-,-ms-,这些就是浏览器的私有属性。为什么会出现私有属性呢?这是因为制定HTML和CSS标准的组织W

css text不换行怎么办

csstext不换行怎么办css强制换行需要设置word-wrap属性和word-break属性,具体设置如下:div{ word-wrap:break-word; word-break:break-

css right属性不生效怎么办?

cssright属性不生效怎么办?cssright属性不生效是因为元素的position属性值为static,解决方法是将元素的position属性的值改为relative、absolute、fixe

link标签引入css不起作用怎么办?

link标签引入css不起作用怎么办?1、使用link标签引用CSS:2、link无效的问题:●原因多数是css路径写的不正确。路径分为相对路径和绝对路径。如果是相对路径要仔细检查路径是否和文件相对应

iis不加载css怎么办?

iis不加载css怎么办?解决方法:打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容选中后安装即可。

https无法加载css js资源怎么办?

https无法加载cssjs资源怎么办?在https的网站中引用http路径的js或css会导致不起作用,其形如:解决办法:将http:去掉,改为浏览器默认是不允许在HTTPS里面引用HTTP资源的,

邮件不支持css怎么办?

邮件不支持css怎么办?邮件是支持css的,但是需要使用内联样式,内部样式和外部样式无法使用。下面是一些在邮件中使用css的注意事项:1.邮件使用table+css布局2.邮件主要部分在body内部,

qq浏览器不支持css3怎么办?

qq浏览器不支持css3怎么办?css3属性,比如keyframe和animation都需要加webkit、ms前缀,针对手机不同浏览器可能还要加更多前缀。以此达到适配所以浏览器的目的。解决qq浏览器

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

iis部署html css无法显示怎么解决

iis部署htmlcss无法显示怎么解决如果你的网站在VS或其他软件中运行时具有CSS和JS功能,但到了IIS中就消失了,导致网站变成纯文字界面。你需要进行如下尝试。1、首先确认是否打开IIS中的“动

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

dw怎么显示css效果?

dw怎么显示css效果?dw中显示css效果,可以开启实时视图模式。我们现在来看看,Dreamweaver如何显示实时视图。1、打开软件后我们点击菜单栏上方的【查看】按钮。2、接下来我们就可以点击【实

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显