14.before_after

来源：互联网发布：jira 数据库表结构编辑：程序博客网时间：2024/06/03 06:51

1.before_after插入文字

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>#div1{width:500px; height:200px; font-size:30px; border:1px solid red;}#div1:before{ content:"我是前面"; color:red;}#div1:after{ content:"我是后面"; color:red;}</style></head><body><div id="div1">中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</div></body></html>

2.before_after插入图标

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>p{height:100px;font-size:30px;border:1px solid red;}p:before{content:"☏";color:red;}p:after{content:"❤"; color:red;}</style></head><body><p>中华人民共和国万岁</p><p>中华人民共和国万岁</p><p>中华人民共和国万岁</p></body></html>

3.before_after插入方块

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>#div1{position:relative;width: 800px;height: 200px;font-size: 30px;border: 1px solid red;}#div1:before{content:"";position:absolute;left:100px;top: 150px;background:red;width:100px;height:100px;}</style></head><body>    <div id="div1"></div></body></html>

4before_after引入网络元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>#div1{position:relative;width:800px;height:500px;font-size:30px;border:1px solid red;}#div1:before{content:url(https://www.baidu.com/img/bd_logo1.png);}</style></head><body>    <div id="div1"></div></body></html>

阅读全文

0 0