[TypeStyle] Style CSS pseudo elements with TypeStyle
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element.
In this lesson we show how you can insert new content into the DOM using CSS pseudo elements. We also cover using other pseudo element selectors to change default browser behaviors.
import { style, media } from 'typestyle';
import * as React from 'react';
import * as ReactDOM from 'react-dom'; const fontSize = (value: number | string) => {
const valueStr = typeof value === 'string' ?
value :
value + 'px';
return {
fontSize: valueStr
}
};
const className = style(
{
color: 'red',
transition: 'font-size 0.2s',
$nest: {
'&::after': {
content: `' Type after'`
},
'&::selection': {
backgroundColor: 'black',
color: 'gold'
}
}
},
media({maxWidth: , minWidth: }, fontSize()),
media({minWidth: }, fontSize()),
media({maxWidth: }, fontSize())
); ReactDOM.render(
<div className={className}>
Hello Typestyle
</div>,
document.getElementById('root')
);
[TypeStyle] Style CSS pseudo elements with TypeStyle的更多相关文章
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before : ...
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on p ...
- [TypeStyle] Generate static css + html files using TypeStyle
You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this patt ...
- Node聊天程序实例05:index.html和style.css
作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. index. ...
- 可否控制<link type=text/css rel=stylesheet href=style.css>
本篇文章主要介绍了"可否控制<link type=text/css rel=stylesheet href=style.css> ", 主要涉及到可否控制<lin ...
- WordPress主题开发:style.css主题信息标记
在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表 而且s ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- wordpress后台编辑如何显示定义的`style.css`样式
wordpress后台编辑如何显示定义的style.css样式 由于公司官网采用wordpress进行搭建,但是却又自己设计页面,无奈主题只能自行构建了,直接修改wordpress自带的主题进行修改. ...
- CSS pseudo classes All In One
CSS pseudo classes All In One CSS 伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ...
随机推荐
- python3 时间处理
1 标记当前时间 import datetime from dateutil import tz #标记当前时间为中国时间 注意(replace 只有标记的意思没有转化的意思) datetime.da ...
- emacs 为什么找不到运行程序?
我记得前段时间有个朋友问我为什么在emacs中打不开matlab程序?明明在terminal下是能打开的,却在emacs中不行. 今天自己最终遇到了相似的问题,我今天安装racket 6.0.安装好后 ...
- VPS搭建与IPv6使用教程
VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...
- 44.delete用法
声明+delete:函数禁止使用.可以使一个类禁止释放
- Navigator对象关于语言的属性
[摘要]在做国际化WEB项目的时候,遇到了一个根据用户浏览器所使用的自然语言切换默认语言版本的问题.于是,整理了这篇文章. 首先,W3Cschool关于Navigator的各个属性值说的很明确了,这里 ...
- Objc执行时读取和写入plist文件遇到的问题
以下是本猫保持游戏NPC和物件交互的plist文件: 随着游戏和玩家逐步发生互动,玩家会改动人物和物件的交互的状态.这也是RPG游戏最主要的功能. 在切换每一个地图时须要将上一个地图发生的改变存储到p ...
- java位运算应用
位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 比如:3 <<2(3为int型) 1)把3转换为二进制数字0000 0000 0000 0000 0000 000 ...
- Eclipse如何从导入SVN上导入项目
1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...
- 【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...
- 【习题 6-7 UVA - 804】Petri Net Simulation
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever test sever ...