一、介绍

::before和::after是伪元素，（css3中为了与伪类做区别，伪元素采用双冒号的写法；但因为兼容性的问题，所以现在大部分还是统一的单冒号，比如:first-line、:first-letter、:before、:after等，但新的在CSS3中引入的伪元素就不允许用单冒号的写法。）

“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容之后插入新内容。

::before或::after都必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline，可以自己改.

二、用法

1.利用content的值：
（1）content：“字符串”；

可以统一在字前面或后面加一些字符
在这里插入图片描述

p:after{~~删除线格式~~ 
		content:":";
}
	
<body>
	<p>请输入姓名</p>
	<p>请输入年龄</p>
	<p>请输入性别</p>
</body>

(2)content:url(…)

可以在字前面加一些小的图标，通过定位把位置调合适
在这里插入图片描述

p::before{
			content:url(footer3.png);
			position: relative;
			top:17px;
		}
<body>
	<p>微信</p>
</body>

(3)通过attr()属性调用当元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

attr() 函数返回选择元素的属性值。
在这里插入图片描述

a::after{
			content:"(" attr(href) ")";
		}
p:after{
			content:attr(class);
		}
<p><a href="https://wx.qq.com/">微信</a></p>
<p class="hello"></p>

2.实现三角形
在这里插入图片描述

#top-triangle{
			width:0px;
			height:0px;
			border:20px solid transparent;
			border-bottom:20px solid pink;
		}
#right-triangle{
			width:0px;
			height:0px;
			border:20px solid transparent;
			border-left:20px solid pink;
		}
#bottom-triangle{
			width:0px;
			height:0px;
			border:20px solid transparent;
			border-top:20px solid pink;
		}
#left-triangle{
			width:0px;
			height:0px;
			border:20px solid transparent;
			border-right:20px solid pink;
		}


<body>
	<div id="top-triangle"></div>
	<p></p>
	<div id="bottom-triangle"></div>
	<div id="right-triangle"></div>
	<div id="left-triangle"></div>
</body>

3.实现对话框效果：
在这里插入图片描述

		.left,.right{
			position: relative;    /*后面移动会盒子位置*/
			display: table;
			min-height: 40px;
			text-align: center;
			background-color: #9EEA6A;
			margin: 0;
			border-radius: 7px;
		}
		.left{
			left:10px;
		}
		.left::before,.right::after{
			position: absolute;
			display: inline-block;
			content: "";
			width: 0px;
			height: 0px;
			border: 8px solid transparent;
			top: 15px;		/*移到中间*/
		}
		.left::before{
			border-right-color: #9EEA6A;
			left: -16px;
		}
		.right::after{
			border-left-color: #9EEA6A;
			right: -16px;
		}
		.left p,.right p{
			padding:0px 10px;
		}
		.right{
			right:-150px;
		}

    <div class="left">
        <p>你好啊</p>
    </div>
    <div class="right">
        <p>好久不见~</p>
    </div>

4.实现箭头
在这里插入图片描述

		.box{
			position: relative;
			width: 200px;
			height: 50px;
			background-color: pink;
		}
		.box::before{
			position: absolute;
			content:"";
			width: 12px;
			height: 12px;
			border: 1px solid black;
			border-bottom-color: transparent;
			border-right-color: transparent;
			transform: translate(-50%, -50%) rotate(-45deg);
			left: 20px;
			top: 50%;
		}
<body>
	<div class="box"></div>
</body>

5.清除浮动
原理：利用:after和:before在元素内部插入两个元素块，从而达到清除浮动的效果。

.outer:after { 
		clear:both; 	/*清除浮动*/
		content:'';
		display:block; /*显示伪元素*/
		width:0;		
		height:0;		/*不占位置*/
		visibility:hidden; 	/*允许浏览器渲染它，但是不显示出来*/
}

6.画分割线：画一条分割线
在这里插入图片描述

<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="spliter">分割线</p>
</body>
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign