.center-tc {
text-align: center;
position: relative;
color:red;
&:before{
content:'';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: green;
position: absolute;
top:25px;
left: 8px;
};
&:after{
content:"";
width:88%;
height: 1px;
background:green;
position: absolute;
top:30px;
left: 18px;
}
}

上述代码实现的效果如下

要注意的是:

1)after生成的内容是放在寄生元素内部的,且在该内部的最后面:

例如html文件:

<div class="box">dasd</div>
<div class="box-2">dasd</div>

对应的css文件:

.box,.box-2{
width:300px;
height: 200px;
background: #ccc;
display: inline-block;
}
.box{
&:after{
content:'打算就看到';
};
}
.box-2{
background: orange;
}

则生成的效果如下所示:

可以看到after的内容“打算就看到”就在第一个div的内部。所以可以使用父元素相对位置,after的内容绝对定位的方法来定位元素。

2)after的内容的width:百分比;是继承了父元素的宽度做的百分比;例如一般我们设置子元素的宽度时就是使用的width:100%

伪类after的使用的更多相关文章

  1. 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  4. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. 伪类before和after

     以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)

  6. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  7. 利用伪类:before&&:after实现图标库图标

    一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

  9. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  10. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...

随机推荐

  1. redis 在32位系统安装以及使用

    1.下载32位redis文件. http://pan.baidu.com/s/1eRIZPAE 我下载后的路径是:E:\Redis\Redis 里面的文件如图:  2.调取命令窗口 win+R,输入命 ...

  2. django"动态网页","动态url","调试方法"

    一.动态网页 其实只是每次刷新时,获取最新时间而已 1.urls.py from django.conf.urls import patterns, url, include urlpatterns ...

  3. Authentication和Authorization的区别

    搞不太清楚Authentication和Authorization的区别,在网上搜了一下,lucky16的一篇文章讲的通俗,看了就懂,记录下来: 你要登机,你需要出示你的身份证和机票,身份证是为了证明 ...

  4. Linux 系统目录结构

    登录系统后,在当前命令窗口下输入命令: ls / 你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin: bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot ...

  5. 关于tomcat会在url末尾自动追加斜杠(/)

    今天,突然发现一个问题, 比如我的请求路径为  http://ip:port/my_project/myapp, 在浏览器中敲入这个地址,然后会显示 http://ip:port/my_project ...

  6. python内置函数 3

    int( [x[, radix]])转换为字符串或数字为纯整数.如果参数是一个字符串,它必须包含一个可能有符号的十进制数作为一个 Python 整 数,可能嵌入空格.以 radix 参数给出的基数为基 ...

  7. int转string

    #include<iostream> #include<sstream> #include<string> using namespace std; int mai ...

  8. MongoDB搭建Replica Set Shard Cluster步骤

    本文记录从头搭建一个MongoDB 副本集分片集群的过程. 我们要创建一个这样子的分布式集群:有两个shard,每个shard都是一个replica set,各有两个副本(实际产品应用中还应加上一个仅 ...

  9. Fedora10下建立linux系统的窗口没有地址栏

    Fedora10下建立的linux系统窗口没有地址栏 打开一个文件夹就打开一个窗口,还没有地址栏,这很麻烦也不习惯. 另:打开地址栏可以用组合键 Ctrl+L 如图 解决: edit---perfer ...

  10. SQL Server基本函数

    1. 字符串函数 1.1 datalength( char_expr ) ,返回表达式的字节数,不包含尾随空格 返回类型:如果 expression 的数据类型为 varchar(max).nvarc ...