为什么不要使用 ::before{content:url(‘xxx‘)} 设置图标

最新推荐文章于 2022-05-12 19:44:11 发布
最新推荐文章于 2022-05-12 19:44:11 发布
阅读量8.6k 收藏 1
点赞数
分类专栏： 前端 css 文章标签： css 伪类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34930640/article/details/78676096
版权
前端 同时被 2 个专栏收录
27 篇文章 1 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏

项目中遇到 随手记录
::before ::after等伪类中使用content:url()中的图片无法设置宽高

如果我的文章有帮上什么忙并且您也愿意赏个脸 就扫码领个红包吧(～￣▽￣)～

在这里插入图片描述

白茶SyraTi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
html中before放置图片,CSS伪元素before、after用法 给图片四角加边框
weixin_39680154的博客
06-10 2660
:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。我们用CSS手册可以查询到其基本的用法：E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用Ie6-7 不支持既然说到了be...
css3 content 使用url,CSS3中的content属性使用示例
weixin_29688535的博客
08-03 1829
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:XML/HTML Code复制内容到剪贴板这是h1这是h2cssCSS Code复制内容到剪贴板h1::after...
css before content img,【CSS系列】被忽略的content属性
weixin_35297190的博客
08-04 1470
CSS的 content 属性，大家应该都不陌生，很多时候我们都使用过，一般情况下你看到最多的用法无外乎这样两种：一种用于清除浮动，一种用于我们经常使用的字体图标。.clear:after{content: "";display: block;clear: both;}.icon:before{content: "\e778";}大多数都会停留这个阶段，很少会探索更多的用法，甚至有些人认为它的用法...
深入理解::before/:before和::after/:after的使用
09-22
之前在网上总是可以看到::before :before ::after :after的相关文章，但是没有使用过，今天查了些资料，终于知道了他们的关系和作用。下面就做一个总结，方便有需要的朋友们可以参考借鉴，下面来一起看看吧。
多数元素，摩尔投票法，简单理解
吃醋不爱蘸饺子的胡诌乱造
11-28 151
/* 求多数元素 元素个数大于n/2 ， 这里假设数据不为空，并且存在多数元素 例子：23122 中的多数元素就是2 */ 解释：就把这个方法想象成，这个元素，不同的元素都是它的敌人都会和它抵消，那么最后剩下的就是多数元素。因为它的个数大于n/2足以对抗所有的其他元素。 /* 求多数元素 元素个数大于n/2 ， 这里假设数据不为空，并且存在多数元素 例子：23122 中的多数元素就是2 */ #include <iostream> using namespace std; int main
CSS content 属性以及 :before和 :after 伪元素
ssisse的博客
08-24 2436
CSS content 属性 定义和用法 content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 说明 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。 可能的值 值 描述 none
content:url()中的图片无法设置宽高
qq_16746441的博客
11-22 3674
项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高 原文链接 https://blog.csdn.net/sinat_34930640/article/details/78676096
css before content img,::before中content插入图片失败了~_html/css_WEB-ITnose
weixin_39984661的博客
08-04 543
.sidenav ul li > img::before {content: url(images/c1w.png);position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;-webkit-transition: -webkit-transform 0.3s;transition: transfo...
css :before 内容左边 分割线（四）
weixin_30604651的博客
09-11 318
商品 左边分割线，使用css伪类实现，before or after <style> *{ margin: 0; padding: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { ...
小菜菜的工作小坑 (固定导航栏 & content:url()中的图片 & 返回顶部的按钮 & css本地调好的样式和上传到空间上的样式不一样)
weixin_44409748的博客
05-12 547
1.用jq动态添加类名称时，一直不起作用，发现是因为使用addClass的时候，样式不需要加点. 把点去掉就好了。 //修改前 $('#header12').addClass('.box-active') //修改后 $('#header12').addClass('box-active') 2.实现固定导航头部 本来打算（使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性）但是滚动会有抖动，然后我就使用sticky属性，实现的效果就不会产生抖动啥的.
CSS中的before和:after伪元素使用详解
09-25
主要介绍了CSS中的before和:after伪元素使用详解,包括对一些非文本内容的插入操作使用,需要的朋友可以参考下
CSS伪元素：after：before的特殊用法demo
06-19
伪元素实现tooltip，nav导航栏的炫酷效果以及计数器
微信小程序 CSS 选择器::after和::before的简单使用
03-29
前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...
CSS3中伪元素::before和::after的用法示例
09-24
before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...
微信浏览器中iframe srcdoc、src="data:text/html,xxxx" 等无法使用情况下防止样式污染的解决方案
https://syra-ti.icu
11-07 9757
业务需求 从后端取HTML 前端展示 要求 HTML不得被前台全局样式污染 解决方案 1、使用iframe 的 srcdoc &amp;amp;amp;amp;amp;lt;iframe srcdoc=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;这是HTML&amp;amp;amp;amp;amp;lt;p&amp;amp;amp
JS实现点击按钮，复制文本框中的的内容
https://syra-ti.icu
07-28 5313
JSfunction copyUrl2() { var target=document.getElementById("anyInput"); target.select(); // 选择文本 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); } html<textarea cols="20"
一个Mui Demo仓库
https://syra-ti.icu
08-10 4665
链接 https://github.com/zhaomenghuan/mui-demo
拒绝假空心！纯css实现 真·空心带边框直角三角形和空心带边框直角梯形！
https://syra-ti.icu
06-07 4446
需求 ↑需要实现一个背景为半透明且带边框的直角梯形 百谷解决方案 碰到问题，程序猿的优良传统，先百谷一下（？） 得到的解决方案总结一下有这些： 1.利用border交界处为斜边来制作，即border-top:none;border-right:transparent →问题：使用border来做背景，没法在border上再做边框，只能得到一个半透明的直角梯形 2.利用矩形和三角形拼接 →问题：...
怎么修改::before中content中内容的高度
最新发布
09-14
### 回答1： 您可以使用CSS中的height属性来修改::before中content中内容的高度。例如，您可以使用以下代码将高度设置为30像素： ``` ::before { content: "示例文本"; height: 30px; } ``` 请注意，您需要将示例文本替换为您自己的内容。 ### 回答2： ::before是CSS伪元素的一种，它可以在元素的内容之前插入一个子元素。在使用::before时，content属性用于定义插入内容的类型和内容本身。 对于修改::before中content内容的高度，我们需要注意以下几点： 1. content属性本身不能直接设置高度，因为它是用于定义插入内容的类型，例如字符串内容、图标等。 2. 要设置::before中插入内容的高度，我们可以通过设置::before元素的样式来实现，比如设置宽度和高度来控制内容的大小。 3. 可以使用伪元素的display属性来设置::before元素的显示方式，如将其设置为块级元素或内联元素，这样就可以控制内容的高度。 4. 还可以使用padding属性或line-height属性来控制插入内容的行高，从而间接地改变内容的高度。 总结起来，要修改::before中content内容的高度，我们可以通过设置伪元素的样式，比如设置宽度、高度、display属性、padding属性或line-height属性来实现。 ### 回答3： 要修改::before中content的高度，可以通过CSS的height属性来实现。 首先，在CSS样式中找到::before伪元素的选择器，并添加height属性，例如： ``` ::before { height: 20px; } ``` 这样就将::before中的content内容的高度设置为20像素。 如果想要修改content内容的高度为根据文字内容自适应的情况，可以使用display属性来实现。在::before伪元素的选择器中添加以下样式： ``` ::before { display: table; height: auto; } ``` 通过将display属性设置为table，就可以使得::before元素的高度根据文字内容自动调整。同时，将height属性设置为auto，则可以让高度自适应容纳文字内容。 需要注意的是，::before伪元素的content内容默认为行内元素，无法直接设置高度。因此，需要将display属性设置为其他块级元素，如table、block等，才能够修改其高度。 以上就是修改::before中content内容的高度的方法，可以根据具体需求选择合适的方式进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值