<!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> <style> /* 行内元素不能设置宽高，以此排列 块级元素独占一行，可以设置宽高 行内块以此排列，可以设置宽高 */ div::before { content: "我是"; background-color: coral; height: 100px; width: 100px; /* 转化为行内块，可以设置宽高 */ display: inline-block; } div::after { content: "国人"; background-color: coral; height: 100px; width: 100px; /* 转化为行内块，可以设置宽高 */ display: inline-block; } </style> </head> <body> <!-- 伪元素选择器 ::before 在元素内部前面插入一个行内元素 ::after 在元素内部后面插入一个行内元素 必须有 content 属性 会创建一个行内元素 --> <div>中</div> </body> </html>