html伪元素before占用高度,CSS:伪元素:before和:after从原始元素继承宽度/高度...
我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像。但是,如果不指定宽度和高度,这些将不显示。这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页。
然而,因为这些图像是动态生成的jQuery和用户提交,图像的宽度和高度每次不同。现在我可能可以解决这个与Javascript通过获取图像的宽度,并将其传递给:之前,但这似乎是这样的东西太多的工作。
我的问题是如果有一个方法来做到这一点,只有CSS,包含图像的宽度传递到: li> ;,因此:before和:after伪元素继承了原始元素的宽度和高度。
基本页面布局:
# css style simplefied
ul{ float:left; list-style:none}
li{float:left;}
li img{float:left}
li:before{
content:"":
position:relative;
position:absolute;
float:left;
box-shadow:0 1px 2px rgba(0,0,0,0.4);
}
PS:所需的兼容性仅适用于移动Webkit浏览器。
编辑
我可以通过使用下面的行添加行到CSS使用Javascript:
var heightImg = (($('ul li:nth-child(n)').height())) + 'px';
document.styleSheets[1].insertRule('ul li:before { height: ' + heightImg+ '; }', 0);
但这意味着我还必须使用动态id。这不会很难,但我只是想知道是否有一个CSS的方式。
html伪元素before占用高度,CSS:伪元素:before和:after从原始元素继承宽度/高度...相关推荐
- css改变伪元素color_jQuery教程 改变css伪元素样式详解
本篇教程介绍了jQuery教程 改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
- CSS 伪类: 什么是 CSS 伪类?CSS 伪类怎么分类? CSS 伪类有哪些?以及分类对应的伪类
本章讲解的内容为 CSS 伪类 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) . 一: 什么是 CSS 伪类? 1. CSS 伪类是用来添加一些 ...
- html中伪类的兼容性,关于css伪类的一些兼容性测试
测试环境:xp ,ie7~8 chrome. link 伪类 :(:link,:visited) 这个是链接专用 动态伪类 :(:hover,:active,:focus) html> a: ...
- jq 修改元素css伪类样式
css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式.: ...
- jQuery是否可以获取与元素关联的所有CSS样式?
本文翻译自:Can jQuery get all CSS styles associated with an element? Is there a way in jQuery to get all ...
- css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
- html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线 普通的 border 最小高度为1px ...
- html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
- CSS伪元素::before,::after
W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素中. css伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html页面中没有对应的元素,但是其所有用 ...
最新文章
- 使用大batch优化深度学习:训练BERT仅需76分钟 | ICLR 2020
- layer用ajax往jsp页面传值,layer.open中父页面向子页面传值(示例代码)
- verilog always语法_Verilog初级教程(20)Verilog中的`ifdef 条件编译语句
- 动态规划走楼梯_负重爬楼梯、过草地,服贸会六足机械人展示“送水到家”
- 太骚了!Python模型完美切换SAS,还能这么玩。。
- Leet Code OJ 168. Excel Sheet Column Title [Difficulty: Easy]
- 纪年法:公元和公元前
- 使用Eclipse Hibernate插件逐步为POJO域Java类和hbm自动生成代码
- 软件测试 学习之路 CSS(一)
- (四)使用TensorFlow和Keras构建AI语言翻译
- 上海阅文集团android面试题,2018年阅文集团PHP工程师面试题分享
- python3-字符串常用操作
- server.MapPath的相对路径问题
- WEBMAX函数 动态模糊特效【官方教程】
- Qt之获取屏幕分辨率
- 为什么我们不能坚持到底?
- 顾客银行办理业务时,首先在取号机上取号,然后坐在椅子上等候业务员叫号时前往窗口办理业务,假设银行现在有3个窗口可办理业务,请采用信号量和PV操作描述顾取号等候叫号和银行业务员叫号办理业务的同步操作。
- 工具_本地安装chatgpt,openai
- SDNU 1017 (冒泡排序法)
- 微型计算机硬故障举例,计算机信息系统维护与维修