CSS复习：伪元素::before，::after，:hover

最新推荐文章于 2024-07-19 15:50:46 发布

半浮名

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量1k

点赞数

分类专栏： html,css,js基础知识笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/121196137

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

html,css,js基础知识

14 篇文章 1 订阅

订阅专栏

伪元素

- 1.什么是伪元素？

1.什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

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

<style>




    h1{

        text-shadow: 2px 2px 5px red;

    }


    h1::before{
/*color: blue;  设置加入的文字颜色*/
        content:"你好世界！";/*  这里加了文字*/
    }

div{

width: 300px;
height: 300px;
background-color: skyblue;

box-shadow: 10px 10px 5px grey;
}


</style>
<body>
    





    <h1>helloWorld!</h1>
    <div>





    </div>


</body>
</html>

结果：
在这里插入图片描述
::after 伪元素可用于在元素内容之后插入一些内容


    h1::after{

content: "apple";

    }

在这里插入图片描述

:hover：也是伪元素：和a标签一起使用
选择鼠标悬停效果

加上：

a{

color: pink;

}
a:hover{

    color: #000;
}

  <a href="#">点我</a>

结果：
在这里插入图片描述
把鼠标放在a标签上：改变其颜色

半浮名

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS复习：伪元素::before，::after，:hover

伪元素1.什么是伪元素？1.什么是伪元素？CSS 伪元素用于设置元素指定部分的样式。例如，它可用于：设置元素的首字母、首行的样式在元素的内容之前或之后插入内容::before 伪元素可用于在元素内容之前插入一些内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫