伪元素清除最后一个border的边框

css代码：

1 *{ margin: 0; padding: 0; }
2 ul, li{ list-style: none; }
3 #ul1{ border: 1px solid red;  }
4 #ul1 li{ border: 1px solid green; }
5 #ul1:after{ content: ""; display: block; height: 1px; margin-top: -1px; background: #fff; }

html代码：

1 <ul id="ul1">
2     <li>公会</li>
3     <li>游戏</li>
4     <li>充值</li>
5     <li>平台</li>
6     <li>页游</li>
7 </ul>

时间： 2024-12-30 03:51:40

伪元素清除最后一个border的边框的相关文章

伪元素清除浮动？这个你了解吗？

随着前端的不断发展,面对浮动这个问题我们一般喜欢用伪元素清除浮动,下面这段样式号称万能清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } 看着好像没啥为题呀,但是最近小弟遇到个问题(360极速浏览器): 伪元素是在clearfix元素后产生一个清除浮动的块级元素,并且用content的内容填充,但是有些浏览器会产生这个例如“.”占位的问

双伪元素清除浮动理解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .fl{ float:left; } .box1 { width: 300px; height: 100px; background: red; } .box2 { width: 300px; height

使用css3和伪元素制作的一个立体导航条

使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3

伪元素清除浮动（重要）

让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面. #content{background:#000;} .left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;} 所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 cl

什么是BFC？ CSS 使用伪元素清除浮动的方法

BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”. 先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素.所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的:BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮动

伪元素清除浮动及原理

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 1) display:block 使生成的元素以块级元素显示,占满剩余空间; 2) height:0 避免生成内容破坏原有布局的高度. 3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; 4)通过 cont

清除伪元素

如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除. 关于清除浮动的方式: 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响. 注意:一般情况下也不会使用这种方式,因为overflow:hidden

CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.平移 translate() 5.4.缩放 scale 5.5.斜切扭曲skew 六.渐变