文档章节

css中伪元素before或after中content的特殊用法attr

Delete90
 Delete90
发布于 2017/08/02 12:16
字数 101
阅读 3
收藏 0

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <span class="haorooms" name="开">开</span>
        <span class="haorooms" name="源">源</span>
        <span class="haorooms" name="中">中</span>
        <span class="haorooms" name="国">国</span>
    </div>
</body>
<style>
    .haorooms {
        position: relative;
        display: inline-block;
        font-size: 80px;
        color: black;
        overflow: hidden;
        white-space: pre;
    }
    
    .haorooms:before {
        display: block;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        content: attr(name);
        overflow: hidden;
        color: #f00;
    }

</style>

</html>

 

© 著作权归作者所有

Delete90
粉丝 4
博文 50
码字总数 34485
作品 0
程序员
私信 提问
css中:after与::after的区别

基本概念 1.他们都是CSS伪元素,与:hover/:active等伪类不一样。 2.:before/:after伪元素是在CSS2中提出来的,所以兼容性可能到IE8了。 3.::before/::after是CSS3中的写法,为了将伪类和伪元...

BULLEPAO
2017/07/02
0
0
::before和::after伪元素的用法

一、前言 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::...

HarleyZhuge
2018/01/17
1
0
神通广大的CSS3选择器

作者:大额_skylar http://www.cnblogs.com/skylar/p/css3-selector.html 每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的...

数通畅联
2016/02/23
25
0
你所知道或不知道的CSS content属性

写在前面 css博大精深,很多属性,往往都是看似熟悉,但是似乎又不能将其特性和用法完整地说出来。 content属性,的确是很眼熟,也许很多童鞋和我一样,和它初次见面,是在清除浮动的时候: ...

TDGarden
2018/11/07
0
0
你需要知道的三个 CSS 技巧

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS...

oschina
2013/03/04
5.5K
23

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
9
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部