【HTML+CSS】伪元素

伪元素

• ::before 和 ::after
  • content必须写
  • 默认插入的内容是行内元素
  • 在元素内容的最前面插入内容
  • 伪元素前面的两个冒号::可以写一个:

<style>
        div::before{
            content: "前面加的内容";
        }
        div::after{
            content: "前面加的内容";
        }
</style>
<div>
        HTML
</div>

• ::first-letter
  • 第一个字符的样式
  • 伪元素前面的两个冒号::可以写一个:
• ::first-line
  • 第一行的样式
  • 伪元素前面的两个冒号::可以写一个:
• ::selection
  • 用户选中内容的样式 css3
  • 只能改变文本的颜色和背景
  • 必须写两个冒号

<style>
        div::first-letter {
            font-size: 30px;
            color: purple;
        }


        div::first-line {
            font-size: 20px;
            color: red;
        }
        .p1::selection{
            color: blue;
        }
</style>
    <div>
        <p>HTML的全称为超文本标记语言，是一种标记语言。</p>
        <p>HTML的全称为超文本标记语言，是一种标记语言。</p>
        <p class="p1">HTML的全称为超文本标记语言，是一种标记语言。</p>
        <p>HTML的全称为超文本标记语言，是一种标记语言。</p>
    </div>