[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')

);