伪元素的margin值挤压主体元素解决

主体是两个p标签，需要再其左侧添加一个竖线，很常见的需求

目标

前提条件

1. 右侧的文字个数不固定

问题

1. 需要让before元素为`float:left`；
2. 文字个数不固定时，整个元素的宽度是auto，根据文字的内容来算，此时使用 :before伪元素时，如果伪元素占据的宽度过大，会导致文字被挤下去

.demo:before{float: left;height: 67px;content: '';border-right: solid 3px $primary;border-left: solid 2px $primary;margin-right: 10px;
}

解决

将 margin-right: 10px; 改为margin-left: -10px; 使之不占据主体的空间

jsfiddle

伪元素的margin值挤压主体元素解决相关推荐

第四篇 HTML5 伪类与伪元素
目录一.伪类 1.概念: 1.1.first-child伪类 1.2.超链接伪类 1.3.CSS类和伪类 1.4.其他伪类二.伪元素 CSS中伪对象详解 :first-line 伪对象 :firs ...
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...
ie6.ie7支持expression,虽然效率不高,但对于解决一些特别的css布局问题非常有用, 现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型,以及一些非常有 ...
巧用伪元素解决fixed元素被百度浏览器屏蔽问题
背景在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来. Google后发现了这位小伙伴的文章针对前端在百度浏览器总的固定定位的问题文中提到: 这是百度浏 ...
CSS反爬获取伪元素的值
目标网站红薯中文网获取网页源代码也获取不了这些动态渲染的数据所以用简单的,但是有点麻烦的方法使用selenium执行js,或者直接在浏览器里面执行js function kkk(){var my ...
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
前端学习（77）：css中常见margin塌陷问题之解决办法
塌陷问题当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列首先设置两个DIV,并为其制定宽高 1 1 /*HTML部分*/2 <body>3 <d ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...

伪元素的margin值挤压主体元素解决

伪元素的margin值挤压主体元素解决

目标

前提条件

问题

解决

伪元素的margin值挤压主体元素解决相关推荐

最新文章

热门文章