CSS基础(part21)--CSS3伪元素选择器

学习笔记,仅供参考,有错必究

参考自:pink老师教案



CSS3伪元素选择器


伪类选择器:

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

伪类选择器注意事项:

  • beforeafter 必须有 content 属性
  • before 在内容前面,after 在内容后面
  • beforeafter 创建的是一个元素,但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
  • 伪元素和标签选择器一样,权重为 1

  • 举个例子

HTML代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素title>
    <style>
        div {
      
            width: 200px;
            height: 200px;
            border: 5px solid blue;
        }
        
        div::before {
      
            content: "安徽";
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
        
        div::after {
      
            content: "大学";
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    style>
head>

<body>

body>
<div>财经div>

html>

页面:

CSS基础(part21)--CSS3伪元素选择器_第1张图片


你可能感兴趣的:(前端,css,html,css3)