[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 ...
随机推荐
- ArcGIS Engine中空间参照(地理坐标)相关方法总结
转自原文 ArcGIS Engine中空间参照(地理坐标)相关方法总结 1.创建空间参考 /// <summary> /// 根据prj文件创建空间参考 /// </summary& ...
- VFS相关内容
http://blog.csdn.net/icyfire0105/article/details/1899927 VFS是一个软件层,用来处理与Unix标准文件系统相关的所有系统调用,是用户应用程序与 ...
- Drupal 关于节点(nodes)的理解
在 Drupal 构建的站点中.全部的内容都是以节点形式存储的,一个节点能够是公布的不论什么一个内容,比方说一个单面(page).一个投票(Poll).一篇文章(article).论坛主题(forum ...
- Linux下读写芯片的I2C寄存器
要想在Linux下读写芯片的I2C寄存器,一般需要在Linux编写一份该芯片的I2C驱动,关于Linux下如何编写I2C驱动,前一篇文章<手把手教你写Linux I2C设备驱动>已经做了初 ...
- C#解决关闭多线程的form主窗体时抛出ObjectDisposedException 异常
一.现象: 我在主窗体新建线程,使用子线程来处理接收到的数据,并且更新窗体显示内容,但关闭主窗体程序之后就程序就报错,如下所示: 二.分析问题: 由于新建线程的处理函数里边是一直死循环处理数据,虽然窗 ...
- CList 点击表头排序 (2)两种排序方法中其中一种
上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...
- STM32W108无线射频模块串行通信接口编程实例
STM32W108无线射频模块UART通信应用实例 基于STM32W108芯片,编写串口測试程序,測试串口通信.完毕PC通过串口与STM32W108进行通信. 开发环境与硬件平台 硬件:STM32W1 ...
- [Javascript AST] 1. Continue: Write a simple Babel plugin
We want to write a Babel Plugin, which move 'const versionRegex = /(/d+)\.(/d+)\.(/d+)/gi' out of fu ...
- ViewPager+Fragmrnt最简单结合方法
Fragment和ViewPager 本博文系本菜鸟第一次博文展示,有错误之处请虽然提出 FragmentPagerAdapter 谷歌官方提供了这么一个adapter(FragmentPagerAd ...
- “ping”命令的原理就是向对方主机发送UDP数据包,HTTP在每次请求结束后都会主动释放连接,因此HTTP连接是一种“短连接”
Socket 是一套建立在TCP/IP协议上的接口不是一个协议 应用层: HTTP FTP SMTP Web 传输层: 在两个应用程序之间提供了逻辑而不是物理的通信(TCP UDP) T ...