[TypeStyle] Style CSS pseudo elements with TypeStyle
2017-06-05 19:02
561 查看
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.
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: 700, minWidth: 500}, fontSize(20)), media({minWidth: 701}, fontSize(30)), media({maxWidth: 499}, fontSize(15)) ); ReactDOM.render( <div className={className}> Hello Typestyle </div>, document.getElementById('root') );
相关文章推荐
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
- Resource interpreted as Stylesheet but transferred with MIME type application/x-css
- Style page elements with CSS
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
- 建站记录2-CSS文件未加载-已解决-Resource interpreted as Stylesheet but transferred with MIME type text/plain
- odoo 错误 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:
- 警告:Resource interpreted as Stylesheet but transferred with MIME type application/x-css
- Resource interpreted as Stylesheet but transferred with MIME type application/x-css
- CSS——列表(list-style-type)
- css+js 实现在后台加载时前端出现等待的圆形图标,或者批量导入时出现等待图标提高用户体验,废话少说直接上代码 <style type="text/css"> body {
- [TypeStyle] Generate static css + html files using TypeStyle
- ResourceType Style contains key with bad entry:0x01010479
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
- css中用list-style-type指定列表(lists)前面符号
- web——css和图片突然加载不了,console报错:Resource interpreted as script but transferred with MIME type text/html.
- CSS——列表(list-style-type)
- Resource interpreted as Stylesheet but transferred with MIME type text/plain
- <link rel="stylesheet" type="text/css" href="css/index.css">是啥意思?
- [TypeStyle] Use TypeStyle keyframes to create CSS animations
- Angular引入node_modules里面的css文件出错Module build failed:TypeError:URL.startsWith is not a function