【CSS 技能提升】 :before和:after的使用

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。

什么是:before和:after? 该如何使用他们?

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

下面我们先跑个简单的代码测试下效果:

<style>
    p:before{
        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
    }
  </style>
  <p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。我们通过浏览器的"审查元素"看到的内容是:

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。
既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

1.结合border写个对话框的样式

我们将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

<style>
    .triangle{
        width: 0;
        height: 0;
        border-left:50px solid red;
        border-bottom:50px solid green;
        border-top:50px solid black;
        border-right:50px solid pink;
    }
  </style>
  <div class="triangle"></div>

我们会得到下面的图形

我们对上面的样式做些修改:

.triangle{
      width: 0;
      height: 0;
      border:50px solid transparent; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/
      border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/
      /*border-bottom-color: black; //这里设置底部边框色为黑色
        border-left-color: black;   //这里设置左边边框色为黑色
        border-right-color:black    //这里设置右边边框色为黑色*/
  }

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。

接下来我们加上:before:

<style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height:36px;
        border-radius:5px;
        border:black 1px solid;
        background: rgba(245,245,245,1)
    }
    .test-div:before{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px solid transparent;
        left:-12px;
        border-right-color: rgba(245,245,245,1);
    }
  </style>
  <div class="test-div"></div>

通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?召唤:after穿着棉大衣来救场吧~

完整代码:

  <style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:1px solid black;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px solid transparent;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~

2.作为内容的半透明背景层。

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

<style>
      body{
          background: url(https://dn-mhke0kuv.qbox.me/8fc983c2f5c2e2f2d2ce.jpg) no-repeat left top /*这里加了个图片背景,用以区分背景的半透明及内容的完全不透明*/
      }
      .test-div{
          position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/
          width:300px;
          height: 120px;
          padding: 20px 10px;
          font-weight: bold;
      }
      .test-div:before{
          position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/
          content: "";  /*:before和:after必带技能,重要性为满5颗星*/
          top:0;
          left: 0;
          width: 100%;  /*和内容一样的宽度*/
          height: 100%;  /*和内容一样的高度*/
          background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/
          z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/
      }
  </style>
 
<div class="test-div">
      <table>
          <tr>
              <td>Name</td>
              <td><input placeholder="your name" /></td>
          </tr>
          <tr>
              <td>Password</td>
              <td><input placeholder="your password" /></td>
          </tr>
          <tr>
              <td></td>
              <td><input type="button" value="login" /></td>
          </tr>
      </table>
  </div>

当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectIdeas

查看更多 请访问我的独立博客 https://www.aaz5.com/

时间: 2024-10-03 22:25:22

【CSS 技能提升】 :before和:after的使用的相关文章

【css技能提升】完美的 Sticky Footer 布局

在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚应该一直处于页面最底部(如右边): 因此我们可以使用 Sticky Footer 布局 来完美实现我们所需要的页面布局. 首先先说一下什么是 "Sticky Footer" 所谓 "Sticky Footer",并不是什么新的前端概念和技术,它指的就是一种网页效果:如果

Cocos2d-x 3.2 大富翁游戏项目开发-第二十七部分 技能提升和游戏结束判断

本节主要是增加技能提升事件 和 游戏结束判断,游戏判断简单处理了一下,只要有一个角色资金小于0 ,就认为游戏结束. 如果人物在3个以上,则需要做进一步处理,比如失败方的房屋如何处理,这些在处理到多个角色的时候再做处理. 1.添加提升技能随机事件 oid GameBaseScene::initRandomAskEvent() { ................. randomAskEventMap.insert(STORM_UP_TAG,LanguageString::getInstance()

Java技能提升之路

James收集Java技能提升方面的资料,分为:基础篇.提高篇.高级篇- 给出"入口",自我提升 1. Java工程师成神之路:http://www.hollischuang.com/archives/489 2. 留给未来...

挨踢部落故事汇(12):习惯成就技能提升

作为一个普通的芸芸大众,资深宅男,码农,狂爵的生活除了工作之外,还喜欢看书,听歌,静坐.对政府项目深有研究,目前是CMS核心开发团队成员,普通程序员组长.狂爵13年毕业后就开始从事Java CMS产品开发,目前所在公司是航天集团下属单位,开发的项目都是政府项目.他参与开发过国家某保密单位内网(三级等宝,信息迁移,数据摆渡,信息密级权限),国家电网内网升级改造,中工网系统WebLogic集群升级,水利部(财务门户.水资源监控应用门户.单点登录系统.信息门户),国防科工局内部福利系统(伪电商)项目及

提高你css技能的css开发技巧

好久没整理博客了 进来啰嗦两句   继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 **(鼠标移到左下角白色区域,往右侧拖动,实现图片对比效果)**: 我应用到了resize的如下代码: resize: horizontal; 可以水平拉伸! 二.:not()的应用技巧 我们平时在书写导航栏分割线的时候,最后一个标签是没有分割线的,我们一般的写法如下: /* 先给所有添

mysql技能提升篇 - sqlyog高级应用

mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据去了,但是思路仍然是通用的). 在没有sql桌面工具时(或者对于大牛来说),他们是不会用到桌面工具的,都是一个字一个字的码出数据库,这当然是根本.但是,能够高效地利用工具,尤其在有的场合必须要用工具时,又何偿不是一种好事呢!下面我就来总结下mysql桌面工具 sqlyog 的一些应用吧,在总结的同时

移动安全技能提升播报,你想要的这类都有!

近年来,利用app渗透工具展开攻击的案例层出不穷,受害者也与日俱增.虽说只要消除安全漏洞就能够杜绝这些攻击,但这就需要安全从业者掌握正确的安全知识. 随着移动互联网的迅速发展,智能手机,平板电脑,一些可穿戴设备逐渐走进人们的生活,毫无疑问,这些安卓设备不但给我们带来了无穷的乐趣,还可以提高我们的工作效率.那么问题来了,不少人都遇到过这样一种现象,当我们下载安装一些应用程序的时候,往往会附带好多垃圾软件,甚至一些广告插件,给我们带来了极大的苦恼,怎么对安卓app软件进行安全加固,防止逆向破解,被植

CSS技能:运用DIV标签规划最小高度及自在扩展高度

需求在页面最上方运用文档符号运用以上办法时.; 发现需求类似td中height特点既能够确保最小高度又能够完成自在扩展高度的办法.逐步用div规划替换tabl规划的过程中. 通过查找资料和试验.可是该办法在ie6下不支撑,发现min-height能够完成最小高度.所以在款式中添加_height特点,此外关于可变高度的div假如需求自在扩展则不运用height特点即可,假如采用了height则div中的内容太长会跨过下鸿沟. 上下摆放的div1和div2假如div1高度添加后.此刻需求添加clea

CSS技能:运用P规划之最小高度及自在扩展高度

div{clear:both;min-height:100px;_height:100px;}可完成最小高度.关于可变高度的div完成自在扩展高度并关于IE6IE7FireFox兼容. W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/P/xhtml1/DTD/xhtml1-transitional.dtd">运用以上办法时.; 逐步用div规划更换tabl规划的过程中,<逐步用div规划更换tabl规划的过程