css中伪类after before用法

:before 选择器在被选元素的内容后面插入内容。

:after 选择器在被选元素的内容后面插入内容。

1基本用法


before和after

p:before{
content: "before";
}
p:after{
content: "after";
}

测试

输出结果：

2扩展用法

（1）

为边框添加边角

首先讲一下css的边框 border的构成

直接上代码和结果

代码：



.test{
width: 0px;
border-left: 50px solid red;
border-right: 50px solid green;
border-top:50px solid yellow;
border-bottom: 50px solid black;
}

结果：

这样就很清晰了，如果想要做一个三角，我们只需要把其它的边框设为透明就好了。

那如果我们想要div外边加三角怎么办呢，这时候就要用到before和after了



.test{
margin-left: 500px;
position: relative;
width: 0px;
border-left: 50px solid red;
border-right: 50px solid green;
border-top:50px solid yellow;
border-bottom: 50px solid black;
}
.test:before{
content: "";
position: absolute;
top:-50px;
left: -150px;
border:50px solid transparent;
border-right: 50px solid blue;
}

结果：

如果我们想要左边的三角只有框而不是填充满怎么办？这时候就要用after

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.test{

margin-left: 500px;

position: relative;

width: 0px;

border-left: 50px solid red;

border-right: 50px solid green;

border-top:50px solid yellow;

border-bottom: 50px solid black;

}

.test:before{

content: "";

position: absolute;

top:-50px;

left: -150px;

border:50px solid transparent;

border-right: 50px solid blue;

}

.test:after{

content: "";

position: absolute;

top:-50px;

left: -146px;

z-index: 1;

border:50px solid transparent;

border-right: 48px solid white;

}

</style>

</head>

<body>

<div class="test"></div>

</body>

</html>

结果：

（2）作为透明背景

这里我做了一个有特效的button，尴尬的是不知道怎么做成动图传上来。。

代码：

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.btn{

position: relative;

padding: 10px;

display: inline-block;

color: black;

border: 1px solid black;

-webkit-transition: all 0.5s; /*css3 过渡*/

transition: all 0.5s;

z-index: 1; /*图层堆叠顺序*/

}

.btn:after{

position: absolute;

top:0px;

left: 0px;

width: 0%;

height: 100%;

content: "";

background: black;

-webkit-transition: all 0.5s; /*css3 过渡*/

transition: all 0.5s;

z-index: -1;

}

.btn:hover{

color: orange!important;

}

.btn:hover:after{

width: 100%;

background-color: black;

color: orange!important;

}

a{

text-decoration: none;

}

</style>

</head>

<body>

<div class="test">

<a href="#" class="btn">这是一个按钮</a>

</div>

</body>

</html>

这里把after的index设置的比btn的低，作为背景，然后将btn设置为相对布局，after为绝对布局（相对btn布局），当鼠标滑过触发hover事件时，

黑色背景色从左向右填充。

css中伪类after before用法相关推荐

css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
Web入门----css中伪类
CSS中的选择器基本选择器通用选择器 <style>*{margin:0px;padding:0px;} </style> 类型原则器 <style>p{bac ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
css中伪类选择器的顺序
link(正常状态) > visited(访问过后的状态) > hover(鼠标放上去的状态) > active(鼠标按下并未抬起的状态)
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
[css] 举例说明伪类:focus-within的用法
[css] 举例说明伪类:focus-within的用法类似于事件的冒泡机制,可以从获取焦点的元素一职冒泡到根元素上个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...
html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...

css中伪类after before用法

css中伪类after before用法相关推荐

最新文章

热门文章