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.
[00:00] Here, we have a simple React application that runs as div with a particular content to the dom. This div is installed using the CSS class generated using TypeStyle's style function. As an example, we can pump up the font size.
[00:16] In addition to CSS property names, the style object accepts an optional $nest property, which allows you to style arbitrary child selectors. Each key in $nest is a selector. Any ampersand in the selector will be replaced by the generated class name. We can style pseudo-elements simply by adding the relevant effects to ampersand. For example, here we are going to style the after pseudo-element.
[00:43] We can change any CSS property. For example, set the content of this new element using the content CSS property. Here, we are setting the content to a string pseudo-elements. Now, if we run our application, you can see that this new content shows up after our div.
[01:00] There is one thing worth mentioning about the CSS content property. Notice that we added explicit quotes around the content value. This is required by CSS if you are going to pass in a simple string.
[01:13] An alternative to a simple string is the adder expression, which takes its value from an attribute on the selected element. For example, let's replace the content with the value that will be derived from the attribute data-after. Notice the lack of quotes in this case.
[01:29] You can pass any data- attribute to a dom component in React. Here, we are going to set the data-after property, and we are going to set it to the string pseudo again. Now, if you go ahead and run the application, you can see it shows up as expected. The content value is being derived from this attribute. If you remove this attribute, it goes away.
[01:55] You can target different pseudo-element selectors by using different keys under $nest. To demonstrate that, let's go ahead and change the styles of a div when it is selected using the selection pseudo-element selector.
[02:11] If we go ahead and select the div right now, you can see the browser default of white text with a blue background. We can overwrite the browser defaults and change it to a gold text with a black background. Now, if you go ahead and select the div using a mouse, you can see the new black and gold effect.