伪元素

Posted 2020-10-08 XMLYS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了伪元素相关的知识，希望对你有一定的参考价值。

1、"first-line" 伪元素用于向文本的首行设置特殊样式。只能用于块级元素

1、"first-letter" 伪元素用于向文本的首字母设置特殊样式。只能用于块级元素

3、":before" 伪元素可以在元素的内容前面插入新内容。

4、":after" 伪元素可以在元素的内容之后插入新内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .div1{
                width:100px;
                height: 30px;
                border: 1px solid black;
                left: 10px; 
                position: relative;
                text-align: center;
            }
            .div2{
                width:200px;
                height: 200px;
                border: 1px solid black;
                top: 30px;
                left: -1px;
                position: absolute;
                text-align: center;
                display: none;
            }
            .div2:after{
                content: ‘‘;/*没具体内容（如图片）时，也必须要写此句*/
                width: 100px;
                height: 1px;
                background-color: white;
                position: absolute;
                top: -1px;
                display: none;
            }
            .div1:hover .div2:after{
                display: block;
            }
            .div1:hover  .div2{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            div1
            <div class="div2">
                div2
            </div>
        </div>
    </body>
</html>

效果

div1

div2

以上是关于伪元素的主要内容，如果未能解决你的问题，请参考以下文章

伪代码

第九次作业

VSCode自定义代码片段5——HTML元素结构

解决实现伪元素的 hover 效果的问题：