关于行内元素，内联元素before和after的大小设置问题

最新推荐文章于 2022-07-24 11:07:11 发布
最新推荐文章于 2022-07-24 11:07:11 发布
阅读量6.9k 收藏 3
点赞数 1
分类专栏： :before :after

:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的

就像你对a元素设置width/height一样

设置position: absolute;后这个元素的display属性计算为block值；

但是设置的width/height针对的是:before/:after生成的匿名替换元素，而不是其中的content

所以图片的大小是没有效果的

叫我多多酱
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
12-13
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
css ::before和:befor的用法和区别以及伪元素和伪类的区别
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-29 3167
前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。 下面我们来说一下::befor和:befor的用法及区别？ 在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要...
【网页前端】CSS样式表进阶之伪元素
专注于Java领域开发 关注我 带你玩转Java
07-24 888
伪元素：指某个标签内容体的一部分，并非是 HTML 文档中一个真正的完整标签。
html中after对应的样式怎么写,用js实现before和after伪类的样式修改的示例代码
weixin_39535557的博客
06-03 523
本文介绍了使用javascript,jQuery实现修改before,after伪类的样式，分享给大家，具体如下：最近遇到一个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。类如如下的html及样式Hello,are ...
before，after，首个字符,首行和选中样式等伪元素的使用
jt18729260336的博客
11-15 618
伪元素种类有很多，这里说::before,::after,first-letter,first-line,::selection这几个。 1.::before：可以在元素的内容前面插入新内容。 div::before{ /*必须添加content属性，否则后期不可见*/ content: ""; /*默认是行级元素，如果想设置宽高，就必须转换为块级元素,可以使用dis...
CSS3的新特性 行内盒子before和after
dfl2099的博客
03-08 768
CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style t...
::before(:before)和::after(:after)使用
duidandan的博客
12-03 903
CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用::before时必须要用content:" " /* CSS3 语法 */ element::before { 样式 } /* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */ element:before { 样式 } li::before { content: ""; width: 21px; height: 1
vue修改:after伪元素样式
weixin_45264424的博客
08-02 2636
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="span2">hello earth</span> </div> </t
css伪元素:before和:after详解与妙用
克里斯说的博客
11-18 1299
定义 ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。默认地，这两个个伪元素是行内元素，不过可以使用属性 display 改变这一点。其实这个前后也只是个概念而已，灵活运用这两个“助手”，可以简化很多...
CSS3
无区新手的博客
04-06 477
Pink老师整理 CSS3 CSS3 选择器 属性选择器
vue组件利用css var(--变量)实现动态修改伪类属性（::before、::after）
你好！刘斩仙
01-21 9526
如图所示： #1： 我们可以利用此属性实现vue组件动态传值，修改例如：::before、::after等，伪类的背景色，背景图等属性值。 因为vue利用无法直接在css中使用data里的变量，利用var(–变量名),以及style中定义变量（其实此步是模仿:root{}）方能修改。 动态切换主题也可利用此方式实现，由后端返回图片地址，以及颜色主题。 #2： 常规使用方式，但是很尴尬，人们并不喜欢这样写。 只有系统性，需要大量修改重复css属性，才会用到这个。 代码如下：（复制另存txt，修改.html直
css 块状元素和内联元素
12-12
注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟~ 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度...
进一步理解CSS编程中的块级元素和行内元素
12-13
Inline element 内联元素通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文
css伪类用法
柠檬酸
07-26 1151
一、 :after 与 :befor &lt;div class="aaa"&gt; &lt;div class="bbb"&gt;伪类测试&lt;/div&gt; &lt;/div&gt; .bbb:after{content:'我在后';margin-left:10px;color:red;} .bbb:before{content:'我在前';margin-right:10px...
CSS3高级选择器关于 :before 的问题
XXX51129的博客
09-22 1669
:before p:before在每个<p>元素的内容之前插入内容 主体示例： <body> <span> <p>星星</p> <p>月亮</p> <p>一起</p> <p>闪耀</p> </span> </body> 样式示例： bef...
CSS之伪元素 ::before
平平无奇小码农的博客
01-22 7823
这里写目录标题1、 伪元素不设置display：block，也不设置宽高2、 伪元素设置display：block，不设置宽高2、 伪元素设置display：block，设置宽高 1、 伪元素不设置display：block，也不设置宽高 <style> .div6 { width: 200px; height: 100px; margin: 100px; background-color: yellow; } .d
使用伪元素插入图片大小调整问题
CSDdas的博客
04-13 3762
使用伪元素插入图片大小调整问题
html中after对应的样式怎么写,css – 如何创建内联样式：before和：after
weixin_39630126的博客
06-03 1182
我从http://www.ilikepixels.co.uk/drop/bubbler/生成一个泡沫聊天在我的页面，我把一个数字里面.bubble {position: relative;width: 20px;height: 15px;padding: 0;background: #FFF;border: 1px solid #000;border-radius: 5px;}.bubble:af...
node-v6.3.1-linux-ppc64.tar.xz
最新发布
05-10
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
伪元素选择器before和after
06-10
伪元素选择器before和after可以...需要注意的是，伪元素选择器before和after只能用于部分元素，如块级元素、一些表单元素、以及一些常见的内联元素（如a、span等）。同时，它们也不能用于替换元素，如img、input等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值