:before :after

时间：2023-03-09 14:55:28
:before :after

#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; }

随机推荐

  1. linux杂记（八）linux压缩与打包

    linux系统常见的压缩指令 一般被压缩过的档案,通常其附档名都是[*.tar,*.tar.gz,*.tgz,*.gz,*.Z,*.bz2]等等. *.tar:tar程序打包的数据.并没有压缩过 *. ...

  2. 2)PHP中把读取.txt中内容并转为UTF-8格式

    <?php $filename = "filename.txt"; $handle = fopen($filename, "r");//读取二进制文件时, ...

  3. spring与hibernate整合配置基于Annotation注解方式管理实务

    1.配置数据源 数据库连接基本信息存放到properties文件中,因此先加载properties文件 <!-- jdbc连接信息 --> <context:property-pla ...

  4. 转: Apache SSI详解及应用

    转: Apache SSI详解及应用 什么是 SSI? SSI(Server Side Includes),是嵌套在 HTML 网页中的指示语句,由后台服务器进行代码的解释计算.使用 SSI 可以动态 ...

  5. 贴片陶瓷电容的NPO、C0G、X7R、X5R、Y5V、Z5U辨析

    NPO与X7R.X5R.Y5V.Z5U神马的有啥区别?主要是介质材料不同.不同介质种类由于它的主要极化类型不一样,其对电场变化的响应速度和极化率亦不一样. 在相同的体积下的容量就不同,随之带来的电容器 ...

  6. 所有的GUI Toolkit，类型之多真开眼界

    The GUI Toolkit, Framework Page User interfaces occupy an important part of software development. Th ...

  7. 数学之路(3)-机器学习(3)-机器学习算法-SVM[7]

    SVM是新近出现的强大的数据挖掘工具,它在文本分类.手写文字识别.图像分类.生物序列分析等实际应用中表现出非常好的性能.SVM属于监督学习算法,样本以属性向量的形式提供,所以输入空间是Rn的子集. 图 ...

  8. Socket编程指南及示例程序

    例子代码就在我的博客中,包括六个UDP和TCP发送接受的cpp文件,一个基于MFC的局域网聊天小工具工程,和此小工具的所有运行时库.资源和执行程序.代码的压缩包位置是http://www.blogja ...

  9. 被拒--悲剧之ORA-01017: invalid username/password; logon denied 错误

    本地没有安装oracle.安装了oracleclient和PL/SQL Developer.来实现对oracle数据库的可视化操作. 在使用在登录PL/SQL无法登录.提示错误:ORA-01017: ...

  10. Shell 脚本小试牛刀（番外） -- 捷报

    捷报 捷报 捷报 捷报 捷报 捷报来袭,本系列的脚本已在Github 上开了版块, 我命名为" easy shell "(点此进入). 眼下已加入前面几期中的脚本,日后还会有很多其 ...

相关文章