HTML中:after、:before、:hover的作用及其用法

一、:before的作用和用法

作用：用于在元素内容前面加上指定内容

用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="test">测试</div>
</body>
</html>
<style>
.test{width: 100px;height: 100px;background-color: antiquewhite;}
.test:before{content: '前面添加元素';color: red;}
</style>

二、:after的作用和用法

作用：用于在元素内容后面加上指定内容

用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="test">测试</div>
</body>
</html>
<style>
.test{width: 100px;height: 100px;background-color: antiquewhite;}
.test::after{content: '后面添加元素';color: red;}
</style>

三、:hover的作用和用法

作用：用于给元素添加鼠标划入效果

用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="test">测试</div>
</body>
</html>
<style>
.test{width: 100px;height: 100px;background-color: antiquewhite;}
.test:hover{color: red;}
</style>

HTML中:after、:before、:hover的作用及其用法相关推荐

chrome中Blackbox Script 黑盒脚本作用及用法
chrome中Blackbox Script 黑盒脚本作用及用法 Blackbox Script功能每天前端人员在调试代码的时候,都可能会遇到代码调试着会进入第三方库文件,带来很多没必要的调试,不方 ...
javascript 中 caller 与 callee 的作用以及用法
这两个关键字在平时编码中几乎难以用到,但它们既然存在于javascript语言体系中,那么还是有必要了解下. caller 是 javascript 函数类型的一个属性,它引用调用当前函数的函数 fu ...
Python包中__init__.py文件的作用和用法
在Python工程中,我们经常可以看到带有"__init__.py"文件的目录,在PyCharm中,带有这个文件的目录被认为是Python的包目录,与目录的图标有不一样的显示.如下 ...
js中的匿名函数的作用以及用法讲解
匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高!也是学好JS的重点. 释义:匿名函数,就是没有实际名字的函数. 小试牛刀,首先我们声明一个普通函数: //声明一个普通函数,函数的名 ...
js中call和apply的作用和用法
call和apply的用途是完全一样的.改变函数中this的指向: 为什么要改变this的指向呢?这个有什么用?有哪些场景呢? 首先this的指向总是在变的,this的指向是由函数执行时所在的环境决定 ...
javascript中caller与callee的作用以及用法
这两个关键字在平时编码中几乎难以用到,但它们既然存在于javascript语言体系中,那么还是有必要了解下. caller是javascript函数类型的一个属性,它引用调用当前函数的函数 funct ...
服务器控制台的作用是,电脑中的MMC控制台的作用和用法是什么？
看看这个网站吧很全的 http://www.microsoft.com/technet/prodtechnol/windowsserver2003/zh-chs/library/ServerHelp ...
MySQL数据类型中DECIMAL的作用和用法
在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都有各自的作用,下面我们就主要来介绍一下MySQL数据类型中的DECIMAL类型的作用和用法. 一般赋予浮 ...
php中pre标签,html中pre标签与code标签的作用与用法
HTML 标签定义和用法 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. 标签的一个常见应用就是用来表示计算机的源代码. 可以导致 ...

HTML中:after、:before、:hover的作用及其用法

HTML中:after、:before、:hover的作用及其用法相关推荐

最新文章

热门文章