<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .box{

                 height: 200px;

                 background: yellow;

             }

             /* before after伪类   必须有content属性才能起作用，值字符串

              * 相当于子标签，行内元素 */

             .box:after{

                 content: 'hello world';

                 background-image: url(arrow.png);

                 background-size: 100% 100%;

                 display: block;

                 width: 100px;

                 height: 100px;

                 border: 1px solid darkred;

             }

         </style>

     </head>

     <body>

         <div class="box">

             打开发动机阿斯蒂芬静安寺多路阀三阶段

             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>

             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>

             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>

             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>

             <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>

         </div>

     </body>

 </html>

2

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .box{

                 height: 200px;

                 background: yellow;

                 /*border-bottom: 1px solid #000;*/

                 position: relative;

             }

             /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */

             .box:after{

                 content: '';

                 display: block;

                 height: 1px;

                 width: 100%;

                 border-bottom: 1px solid #000;

                 position: absolute;

                 left: 0;

                 bottom: -1px;

                 transform: scaleY(0.5);

             }

             .box:before{

                 content: '';

                 height: 1px;

                 width: 100%;

                 border-top: 1px solid #000;

                 position: absolute;

                 left: 0;

                 top: -1px;

                 transform: scaleY(0.5);

             }

         </style>

     </head>

     <body>

         <div class="box">

         </div>

     </body>

 </html>

3

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .box{

                 height: 200px;

                 background: yellow;

                 /*border-bottom: 1px solid #000;*/

                 position: relative;

             }

             /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */

             /*.box:before{

                 content: '';

                 height: 100%;

                 width: 1px;

                 border-left: 1px solid #000;

                 position: absolute;

                 left: -1px;

                 top: 0;

                 transform: scaleX(0.5);

             }*/

             .box:before{

                 content: '';

                 height: 100%;

                 width: 1px;

                 border-right: 1px solid #000;

                 position: absolute;

                 right: -1px;

                 top: 0;

                 transform: scaleX(0.5);

             }

         </style>

     </head>

     <body>

         <div class="box">

         </div>

     </body>

 </html>

4

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .box{

                 height: 200px;

                 background: yellow;

                 /*border-bottom: 1px solid #000;*/

                 position: relative;

             }

             /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */

             .box:after{

                 content: '';

                 display: block;

                 height: 1px;

                 width: 100%;

                 border-bottom: 1px solid #000;

                 position: absolute;

                 left: 0;

                 bottom: -1px;

                 transform: scaleY(0.5);

             }

             .box:before{

                 content: '';

                 height: 1px;

                 width: 100%;

                 border-top: 1px solid #000;

                 position: absolute;

                 left: 0;

                 top: -1px;

                 transform: scaleY(0.5);

             }

             .box .left{

                 height: 100%;

                 width: 1px;

                 border-left: 1px solid #000;

                 position: absolute;

                 left: -1px;

                 top: 0;

                 transform: scaleX(0.5);

             }

             .box .right{

                 height: 100%;

                 width: 1px;

                 border-right: 1px solid #000;

                 position: absolute;

                 right: -1px;

                 top: 0;

                 transform: scaleX(0.5);

             }

         </style>

     </head>

     <body>

         <div class="box">

             <span class="left"></span>

             <span class="right"></span>

         </div>

     </body>

 </html>

伪类元素before&after的更多相关文章

  1. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  2. 关于伪类元素:before和:after

    关于伪类元素:before和:after   CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标 ...

  3. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  4. button不能添加伪类元素

    今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submi ...

  5. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

  6. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  7. 如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

    HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...

  8. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  9. js修改伪类元素样式

    <style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; ...

随机推荐

  1. 【记录】利用Jquery 在 textarea 内实现文字动态换行

    背景: 最近在做前端时候遇到一种情况,需要用js动态输入内容到textarea, 比如实时聊天功能,用户A每次发送信息都需要另起一行. 问题: 根据以往经验,以为用$('#textArea').htm ...

  2. (转)Unity Cinemachine插件，实现单目标和多目标之间切换

    Unity Cinemachine插件学习笔记,实现单目标和多目标之间切换*版本要求Unity2017.1及以上. 参考资料: [官方] Unity 2017.1正式版发布 Cinemachine插件 ...

  3. C 编译器的“贪心法”

    C语言中有单字符符号和多字符符号之分,那么,当C编译器读入一个字符‘/’后又跟了一个字符‘*’,那么编译器就必须做出判断:是将其作为两个分别的符号对待,还是合起来作为一个符号对待.C语言对这个问题的解 ...

  4. VersionInformation.dwPlatformId == 2

    Result:=OSVI.dwPlatformId;  {  返回值:  为0表示为win3x系统;  为1表示为win9x系统;  为2表示为winNT;  为3表示为win2000系统;   }

  5. Dubbox服务的消费方配置

    在src/main/resources下创建applicationContext-web.xml <?xml version="1.0" encoding="UTF ...

  6. vue 学习八 自定义指令

    vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { conso ...

  7. vue 父到子动态传值 子组件实时渲染

    近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref=" ...

  8. jqery基础知识实例(二)

    无缝滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. 高级运维(一)：反向代理&使用Varnish加速Web

    案例1.反向代理      目标: 1.代理服务器可以将远程的Web服务器页面缓存于本地 2.代理服务器端口设置为80端口 3.用户通过访问代理服务器即可获得远程Web服务器页面上的内容 4.远程We ...

  10. Extjs各版本的下载链接，包含ext3.4源码示例

    最近在维护一个老平台,用的是ext3.4,老东西在网上找示例发现既然还有人收钱,谷歌了一下总算找到了一位免费的发布的,感谢 yipanbo 分享 Extjs的版本繁多,本文收集了Extjs各个版本的下 ...