:before :after

2022-11-27 08:34:03

#p1:before{
content: "哈哈哈 ";
color: red;
}
#p1:after{
content: "哈哈哈";
color: #452dff;
}
content: url('img.jpg');
content: attr(href);
content: " (" attr(href) ")"

太极图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #p1:before{

             content: "哈哈哈 ";

             color: red;

         }

         #p1:after{

             content: "哈哈哈";

             color: #452dff;

         }

        #a1:after{

            content: attr(href);

        }

         #yin-yang {

             width: 96px;

             height: 48px;

             background: #eee;

             border-color: red;

             border-style: solid;

             border-width: 2px 2px 50px 2px;

             border-radius: 100%;

             position: relative;

         }

         #yin-yang:before {

             content: "";

             position: absolute;

             top: 50%;

             left:;

             background: #eee;

             border: 18px solid red;

             border-radius: 100%;

             width: 12px;

             height: 12px;

         }

         #yin-yang:after {

             content: "";

             position: absolute;

             top: 50%;

             left: 50%;

             background: red;

             border: 18px solid #eee;

             border-radius:100%;

             width: 12px;

             height: 12px;

         }

     </style>

 </head>

 <body>

 <p id="p1">我是一个兵  </p>

 <a id="a1" href="https://www.baidu.com">百度</a>

 <br>

 <div id="yin-yang"></div>

 </body>

 </html>

分割线

.mask { overflow: hidden; height: 20px; }
.mask:after { content: ''; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px/12px; box-shadow: 0 0 8px black; }

随机推荐

jdbc读取数据库，表相关信息（含注释）
读取数据库中的所有的表名 private Set<String> getTableNameByCon(Connection con) { Set<String> set = n ...
CamanJS – 提供各种图片处理的 JavaScript 库
CamanJS 是一个基于 Canvas 处理图片的 Javascript 库,结合简单易用的接口和先进高效的图像编辑技术.CamanJS 很容易扩展新的过滤器和插件,并伴随着一系列广泛的图像编辑功能 ...
linux开机自动连接无线网络
1.右击无线网络图标的“编辑连接”. 2.在“无线”选项卡里,选择“编辑”. 3.在“无线安全性”选项卡里,输入无线密匙,并选中左下角的“对所有用户可用”的选项点击应用,会提 ...
UVa 7146 Defeat the Enemy（贪心）
题目链接: 传送门 Defeat the Enemy Time Limit: 3000MS Memory Limit: 32768 KB Description Long long ago t ...
会话控制：session与cookie
我们在浏览网站时,访问的每一个web页面都需要使用"http协议"实现.而HTTP协议是无状态协议,就是说HTTP协议没有一个内建机制来维护两个事务之间的状态.当一个用户请求一个页 ...
lighttpd mod&lowbar;status模块
用过nginx的status可以查看服务器的状态,之后就想lighttpd有没有这样的模块呢之后看下配置文件,真的有,然后就试下第一步, "mod_auth" 把这个前面的#号 ...
To Build A Dev Env On Linux(Ubuntu)
Step1:System Installing 1)use iso image to Step2:Configuration Step3:Software Installing Step4:Other ...
2014-CVTE网测部分软件技术测试题及答案
1.叉树的先序遍历序列和后序遍历序列正好相反,则该二叉树满足的条件是(D) A.空或只有一个结点 B.高度等于其结点数 C.该二叉树是完全二叉树 D.所有结点无右孩子应该是二叉树的每个结点都只有一个 ...
玩下Javascript
玩下Javascript 前言好久没有更新博客了,也蛮少捣弄javascript,今儿看到一个题目,关于给你一个面板,你可以随意的在上面画矩形,可以移动和删除任意一个你创建的矩形,心血来潮搞着玩哈, ...
如何使用Babel将ES6转码为ES5？
一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...

码农公寓

随机推荐

相关文章