css_9_伪元素选择器

伪元素选择器

• 作用：选中元素的一些特殊位置
• 常用的一些伪元素
  1.选中元素中的第一个文字（第一个字母）

::first-letter

     /* 选中的是div的第一个文字 */
        div::first-letter {
            color: blueviolet;
            font-size: 50px;
        }

2.选中的是元素的第一行文字

::first-line

     /* 选中的是div的第一行文字 */
        div::first-line {
            background-color: aquamarine;
        }

3.选中的是中被鼠标选中的文字

::selection

 /* 选中的是div中被鼠标选中的文字 */
        div::selection {
            background-color: chocolate;
            color: cadetblue;
        }

4.选中的是输入框中的提示文字

::placeholder

    /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: pink;
        }

5.在元素最开始的位置创建一个伪元素（必须使用content：“” 属性来设置伪元素内容）

::before

/* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content: "$";
        }

6.在元素最后的位置创建一个伪元素（必须使用content：“” 属性来设置伪元素内容）

::after

    /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content: ".0";
        }

成果展示：

    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis officia at dolore, tempore aperiam, odio eum maxime voluptas ratione, magnam modi? Minima aliquid obcaecati quia provident nobis ipsa magnam fugit reprehenderit. Ea consequatur expedita nisi perspiciatis nihil, iusto quisquam sapiente nulla non repudiandae quod aliquid facilis illum fuga dolorum quia?
    </div>
    <br>
    <input type="text" placeholder="请输入文字">
    <p>40</p>
    <p>50</p>
    <p>60</p>