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

最新推荐文章于 2024-05-10 00:53:46 发布

勇敢小陈

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量3.6k

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/ct5211314/article/details/127241702

版权

一、: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>

勇敢小陈

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML中:after、:before、:hover的作用及其用法

作用：用于在元素内容前面加上指定内容。作用：用于在元素内容后面加上指定内容。作用：用于给元素添加鼠标划入效果。一、:before的作用和用法。二、:after的作用和用法。三、:hover的作用和用法。
复制链接

扫一扫