CSS Pseudo Components: A Detailed Novice’s Information (2022)

Pseudo components are an enchanting a part of CSS. They mean you can make numerous small tweaks in your design. But, particularly newcomers may well be puzzled through them in the beginning.

For this reason, on this weblog put up, we wish to speak about them intimately. Within the following, we can come up with a newbie’s information to CSS pseudo components. We can give an explanation for what they’re, how they paintings, and what you’ll use them for. The put up will conclude with examples of use the commonest pseudo components.

In spite of everything, we would like you to really feel empowered and succesful to lead them to a part of your CSS repertoire.

What Are CSS Pseudo Components?

So as to provide an explanation for what pseudo components are, it’s very best to begin with an instance. Right here’s an easy HTML web page with a hyperlink to a method sheet and a unmarried paragraph detail on it.



	
		
	
	
		CSS pseudo-element take a look at

On the other hand, after we have a look at the web page in a browser, it comes out like this:

You are going to almost definitely understand the arrow in entrance of the paragraph that looks although it’s now not provide within the HTML file. That’s since the connected genre sheet comprises the next markup:

p::ahead of {
	content material: "→ ";
}

Above is a moderately same old having a look CSS selector. On the other hand, what stands proud are the double colon plus ahead of in the back of it. That’s our pseudo detail.

On this case, it does an easy factor, it provides a component in entrance of the interior HTML of the objective selector and puts the content material outlined in its worth. On this case that’s an arrow and the centered detail is each and every paragraph detail at the web page.

The fascinating factor, on the other hand, is that the arrow does now not display up within the HTML itself. As a substitute, you handiest see a pseudo detail and will test its content material. Here’s what that appears like within the browser developer equipment:

css pseudo elements in browser developer tools

This tendency to act like components with out being so is how pseudo components get their identify. It additionally has some concerning their habits as we can see within the examples beneath.

For now, simply wish to get conversant in the elemental markup for the use of pseudo components:

selector::pseudo-element {
	assets: worth;
}

We can get into extra specifics beneath.

To be had Pseudo Components

But even so the above-mentioned ::ahead of detail, the opposite most well liked pseudo detail is ::after. As its identify suggests, it does the similar issues as ::ahead of however as a substitute creates kid components on the finish of its goal.

But even so the ones two, there also are those components:

::backdrop – Creates a field this is as massive because the person viewport that lets you genre the background of any detail this is grew to become to full-screen, similar to movies.
::cue – You’ll use this to genre WebVTT cues, which means such things as subtitles and captions inside of movies.
::first-letter – Goals the primary letter of the primary line in a block-level detail (e.g. p, h2, div). This may additionally imply inside of a ::ahead of detail.
::first-line – Identical as ::first-letter however concentrated on all of the first line of a block detail.
::file-selector-button – Creates a button of an detail of kind="dossier".
::marker – Allows you to genre the markers of record pieces, similar to in bulleted or numbered lists.
::section() – Means that you can goal explicit HTML components inside of a shadow tree marked with "section=" through identify. Shadow-tree components are added by way of JavaScript. Additional information here.
::placeholder – Use this to genre the placeholder textual content inside of and </code> components.</li> <li><code>::variety</code> – A CSS pseudo detail that you’ll use to use styling to textual content highlighted through customers (e.g. by way of clicking and dragging the cursor throughout).</li> <li><code>::slotted()</code> – Goals components marked with <code><slot></code> for styling.</li> </ul> <h3>Experimental Pseudo Components</h3> <p>But even so that, there are a couple of pseudo components that aren’t absolutely supported through browsers but (or, in some circumstances, by no means):</p> <ul> <li><code>::cue-region</code> – Additionally for styling subtitles and captions, on the other hand, objectives they all as a unmarried unit and now not in my view.</li> <li><code>::grammar-error</code> – Marks textual content {that a} browser has known as grammatically wrong in a specified means. Recently now not supported through any browser.</li> <li><code>::spelling-error</code> – Very similar to <code>::grammar-error</code> however for spelling errors. No longer these days supported through any browser both.</li> <li><code>::target-text</code> – Means that you can genre textual content that the browser scrolls to by way of hyperlink jumps. Browser fortify continues to be just a little spotty this present day.</li> </ul> <p>There also are ceaselessly new components popping out, so keep up to the moment on <a href="https://torquemag.io/2021/03/new-css-features/" target="_blank" rel="noopener">new CSS features</a>.</p> <h3>Pseudo Components vs Pseudo Categories</h3> <p>One thing that chances are you’ll come throughout when having a look into this matter are pseudo categories. They aren’t the similar as CSS pseudo detail despite the fact that a few of them do an identical issues.</p> <p>Essentially the most well known pseudo magnificence is almost definitely <code>:hover</code>. It means that you can exchange the styling of a component relying on whether or not the person hovers over it with their mouse cursor.</p> <pre class="wp-block-code"><code>a:hover { shade: #28303d; text-decoration-style: dotted; }</code></pre> <p>And that’s additionally the primary distinction between pseudo categories and components. Categories goal current components in a definite state and come up with an identical probabilities as if you happen to had added a <a href="https://torquemag.io/2018/02/html-classes-and-ids/" target="_blank" rel="noopener">custom HTML class</a> to it. Pseudo components, alternatively, act like they added solely new HTML components to the markup.</p> <p>The diversities are just a little muddy infrequently, particularly with one thing like <code>::first-line</code> and <code>::first-letter</code>, and in addition since you’ll additionally use them in combination.</p> <pre class="wp-block-code"><code>p:hover::ahead of { content material: "→"; }</code></pre> <p>On the other hand, it’s simple to get the cling of it after you have used them a couple of occasions.</p> <p>Usually, you’ll acknowledge pseudo categories through a unmarried colon in entrance, whilst pseudo components have a double colon. Remember, on the other hand, that the earliest pseudo components (<code>:ahead of</code>, <code>:after</code>, <code>:first-letter</code>, <code>:first-line</code>) additionally paintings with a unmarried colon as a result of that used to be the markup in previous CSS specification.</p> <h2>Examples of Easy methods to Use CSS Pseudo Components</h2> <p>After protecting the speculation, within the following, we wish to cross over a host of examples on use the commonest pseudo components. First, on the other hand, some essential normal regulations.</p> <p>For one, you’ll handiest use one pseudo detail in step with selector. If you wish to follow a number of of them to the similar selector, you must use separate declarations:</p> <pre class="wp-block-code"><code>p::ahead of { content material: "→"; } p::first-line { shade: purple; font-size: 130%; }</code></pre> <p>Secondly, use double colons (<code>::</code>) as a substitute of a unmarried colon (<code>:</code>) to claim pseudo components. This is helping distinguish them from pseudo categories. As stated, maximum browsers fortify each syntaxes for the unique pseudo components however, as a way to write correct, fashionable CSS, you must adhere to the double colon rule.</p> <h3>::ahead of and ::after</h3> <p>Let’s get started off with the very best two. The <code>::ahead of</code> and <code>::after</code> pseudo components handiest paintings with components that settle for kid components, which means that they are able to include different HTML parts.</p> <p>As an example, <code><img></code>, <code><video></code>, and <code><input></code> don’t and thus don’t settle for pseudo components both (an expectation being <code>enter[type=”checkbox”]</code>). Standard programs are block components like divs, <a href="https://torquemag.io/2015/08/wordpress-heading-tags/" target="_blank" rel="noopener">headings</a>, paragraphs, or lists .</p> <p>Moreover, <code>::ahead of</code> and <code>::after</code> handiest display up if you happen to outline their <code>content material</code> assets. It could actually also be empty (<code>content material: "";</code>) however you want to outline it both means. <code>content material</code> takes a string (which means textual content) or a hyperlink to a picture that you wish to have to turn up in that position.</p> <p>You normally use them for styling. Right here’s a normal instance of <code>::ahead of</code> from the <a href="https://torquemag.io/2021/01/twenty-twenty-one-review/" target="_blank" rel="noopener">Twenty Twenty-One theme</a>:</p> <pre class="wp-block-code"><code>.wp-block-pullquote blockquote::ahead of { shade: currentColor; content material: "“"; show: block; place: relative; left: 0; font-size: 3rem; font-weight: 500; line-height: 1; }</code></pre> <p>This section is answerable for appearing the citation marks while you enter a blockquote block.</p> <figure class="wp-block-image size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/example-of-before-pseudo-element-in-wordpress-theme.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/example-of-before-pseudo-element-in-wordpress-theme.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="908" height="397" src="https://wpfixall.com/wp-content/uploads/2021/12/example-of-before-pseudo-element-in-wordpress-theme.jpg" alt="example of before pseudo element in wordpress theme" class="wp-image-92124" data-eio="p" /></picture></a></figure> <p>CSS-Methods additionally has an <a href="https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/#h-custom-blockquote" target="_blank" rel="noreferrer noopener">example</a> that puts citation marks each in entrance and after the quote the use of pseudo components. In addition they train you to make use of the <code>open-quote</code>, <code>close-quote</code> homes for additonal brownie issues.</p> <p>A well-liked utility for <code>::after</code> is to make use of it to transparent floats. If you don’t know what that implies, it’s a technique to be sure that components that experience the <code>drift</code> assets carried out to them keep inside their container.</p> <pre class="wp-block-code"><code><div class="container"> <div class="floated-element"></div> <div class="floated-element"></div> <div class="floated-element"></div> </div></code></pre> <p>To succeed in that for the instance above, that you must use the next CSS markup:</p> <pre class="wp-block-code"><code>.container::after { transparent: each; content material: ""; show: block; }</code></pre> <p><a href="https://caniuse.com/css-gencontent" target="_blank" rel="noreferrer noopener">Browser support</a> for those two CSS pseudo components is superb: </p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/before-after-css-pseudo-elements-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/before-after-css-pseudo-elements-browser-compatibility-1024x198-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="198" src="https://wpfixall.com/wp-content/uploads/2021/12/before-after-css-pseudo-elements-browser-compatibility-1024x198-1.jpg" alt="before after browser compatibility" class="wp-image-92140" data-eio="p" /></picture></a></figure> <h3>::first-letter</h3> <p>Subsequent up is <code>::first-letter</code>. Right here, the very first thing is that it handiest works on block boxes, not anything this is set to <code>show: inline;</code>. You additionally wish to watch out as it’s going to additionally goal punctuation, symbols like digraphs as the primary letter, or no matter is contained in <code>::ahead of</code>.</p> <p>To be had homes for <code>::first-letter</code> are the ones for fonts, <code>shade</code>, <code>background</code>, <code>margin</code>, <code>padding</code>, <code>border</code>, <code>text-decoration</code>, <code>vertical-align</code> (however provided that <code>drift</code> is ready to <code>none</code>), <code>text-transform</code>, <code>line-height</code>, <code>drift</code>, and <code>transparent</code>.</p> <p>A vintage instance this is to make use of it for drop caps:</p> <pre class="wp-block-code"><code>p::first-letter { shade: gray; font-family: Tahoma; font-size: 160%; }</code></pre> <p>That is what the markup above seems like when carried out to a few instance textual content:</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/first-letter-css-pseudo-elements-example.png"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/first-letter-css-pseudo-elements-example.png.webp" type="image/webp"><img loading="lazy" decoding="async" width="510" height="98" src="https://wpfixall.com/wp-content/uploads/2021/12/first-letter-css-pseudo-elements-example.png" alt="first letter css pseudo elements example" class="wp-image-92126" data-eio="p" /></picture></a></figure> </div> <p>In spite of everything, <a href="https://caniuse.com/css-first-letter" target="_blank" rel="noreferrer noopener">browser support</a> for ::first-letter is excellent:</p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/first-letter-css-pseudo-elements-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/first-letter-css-pseudo-elements-browser-compatibility-1024x225-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="225" src="https://wpfixall.com/wp-content/uploads/2021/12/first-letter-css-pseudo-elements-browser-compatibility-1024x225-1.jpg" alt="first letter browser compatibility" class="wp-image-92141" data-eio="p" /></picture></a></figure> <h3>::first-line</h3> <p>We already stated that that is similar to the above however for the primary line of textual content inside of a component. You additionally wish to understand that it handiest works with components that experience a <code>show</code> worth of <code>block</code>, <code>inline-block</code>, <code>list-item</code>, <code>table-caption</code>, or <code>table-cell</code>. Appropriate homes are very similar to <code>::first-letter</code> with the addition of <code>word-spacing</code>, and <code>letter-spacing</code>.</p> <p>Right here is similar instance as above however the use of <code>::first-line</code>:</p> <pre class="wp-block-code"><code>p::first-line { shade: gray; font-family: Tahoma; font-size: 160%; }</code></pre> <p>And here’s what it seems like:</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/first-line-css-pseudo-elements-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/first-line-css-pseudo-elements-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="494" height="119" src="https://wpfixall.com/wp-content/uploads/2021/12/first-line-css-pseudo-elements-example.jpg" alt="first line css pseudo elements example" class="wp-image-92128" data-eio="p" /></picture></a></figure> </div> <p><code>::first-line</code> may be <a href="https://caniuse.com/css-first-line" target="_blank" rel="noreferrer noopener">accepted by virtually every browser</a> in lifestyles</p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/first-line-css-pseudo-elements-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/first-line-css-pseudo-elements-browser-compatibility-1024x173-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="173" src="https://wpfixall.com/wp-content/uploads/2021/12/first-line-css-pseudo-elements-browser-compatibility-1024x173-1.jpg" alt="first line browser compatibility" class="wp-image-92142" data-eio="p" /></picture></a></figure> <h3>::marker</h3> <p>This CSS pseudo detail exists in particular to genre record markers in order that’s what we can use it for. </p> <p>You’ve got two fundamental choices: introduce your personal markers or genre the ones to be had in HTML/CSS through default like bullet issues and numbers. To succeed in this, you might have get entry to to the <code>shade</code>, <code>content material</code>, <code>white-space</code>, <code>font</code>, <code>animation</code>, <code>transition</code> homes, and a couple of extra.</p> <p>Right here’s what it seems like:</p> <pre class="wp-block-code"><code>ul li::marker { content material: "😀"; }</code></pre> <p>As you’ll believe, that merely replaces the record marker with the emoji in query:</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-emoji-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-emoji-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="191" height="116" src="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-emoji-example.jpg" alt="marker css pseudo elements emoji example" class="wp-image-92131" data-eio="p" /></picture></a></figure> </div> <p>On the other hand, you’ll additionally use your personal customized pictures:</p> <pre class="wp-block-code"><code>ul li::marker { content material: url("wordpress-logo.png"); }</code></pre> <p>On this case, we’re the use of the WordPress brand:</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-custom-image-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-custom-image-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="198" height="132" src="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-custom-image-example.jpg" alt="marker css pseudo elements custom image example" class="wp-image-92130" data-eio="p" /></picture></a></figure> </div> <p>Styling current markers works in the similar means you possibly can be expecting. You’ll exchange their shade, exchange the scale by way of font-size, and so forth.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/modify-marker-pseudo-element-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/modify-marker-pseudo-element-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="196" height="163" src="https://wpfixall.com/wp-content/uploads/2021/12/modify-marker-pseudo-element-example.jpg" alt="modify marker pseudo element example" class="wp-image-92132" data-eio="p" /></picture></a></figure> </div> <p><a href="https://caniuse.com/css-marker-pseudo" target="_blank" rel="noreferrer noopener">Browser compatibility</a> for that is nice despite the fact that it’s now not as broad as for different components in this record.</p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/marker-css-pseudo-elements-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-browser-compatibility-1024x172-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="172" src="https://wpfixall.com/wp-content/uploads/2021/12/marker-css-pseudo-elements-browser-compatibility-1024x172-1.jpg" alt="marker browser compatibility" class="wp-image-92143" data-eio="p" /></picture></a></figure> <h3>::placeholder</h3> <p>Like its predecessor, this can be a single-purpose pseudo detail. You’ll handiest use it to genre the placeholder textual content inside of <code><input></code> and <code><textarea></code> components. As a result of that limitation, it handiest takes a couple of homes. Mainly all those who must do with styling textual content plus background homes.</p> <p>Right here’s an instance of what that appears like. First the HTML:</p> <pre class="wp-block-code"><code><div class="signup-form"> <input placeholder="Enter your name..."> <input placeholder="Enter your email address..."> </div></code></pre> <p>After that, you’ll use CSS markup like this:</p> <pre class="wp-block-code"><code>div enter::placeholder { background-color: #578ee6; shade: #000; font-family: 'Brush Script MT', cursive; font-style: italic; text-align: middle; }</code></pre> <p>Whilst you do, that is what it seems like at the web page (I do know, it’s now not very beautiful):</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/placeholder-css-pseudo-element-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/placeholder-css-pseudo-element-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="500" height="151" src="https://wpfixall.com/wp-content/uploads/2021/12/placeholder-css-pseudo-element-example.jpg" alt="placeholder css pseudo element example" class="wp-image-92133" data-eio="p" /></picture></a></figure> </div> <p>And that’s all there may be to it. The one factor that’s left is to have a look at the <a href="https://caniuse.com/css-placeholder" target="_blank" rel="noreferrer noopener">browser compatibility of ::placeholder</a>, which is excellent.</p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/placeholder-css-pseudo-elements-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/placeholder-css-pseudo-elements-browser-compatibility-1024x196-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="196" src="https://wpfixall.com/wp-content/uploads/2021/12/placeholder-css-pseudo-elements-browser-compatibility-1024x196-1.jpg" alt="placeholder browser compatibility" class="wp-image-92144" data-eio="p" /></picture></a></figure> <h3>::variety</h3> <p>Our closing instance of CSS pseudo components issues <code>::variety</code>. Since that is about styling textual content when marked through the person, it accepts standard CSS homes for this sort of activity. Suppose <code>shade</code>, <code>background-color</code>, <code>text-decoration</code>, <code>text-shadow</code>, and so forth.</p> <p>As an example, that is how we will be able to genre a easy HTML paragraph:</p> <pre class="wp-block-code"><code>p::variety { shade: #bae64c; background-color: #e63c25; }</code></pre> <p>It finally ends up having a look like this:</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="516" height="78" src="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example.jpg" alt="selection css pseudo element example" class="wp-image-92137" data-eio="p" /></picture></a></figure> </div> <p>You’ll additionally mix this with different selectors, as an example to genre other portions of textual content one after the other when decided on:</p> <pre class="wp-block-code"><code>p.second-paragraph::variety { background-color: #578ee6; }</code></pre> <p>For those who assign the customized magnificence <code>.second-paragraph</code> to the second one paragraph (thank you, Captain Evident), you might have this end result.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example-with-second-selector.jpg"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example-with-second-selector.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="514" height="156" src="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-example-with-second-selector.jpg" alt="selection css pseudo element example with second selector" class="wp-image-92136" data-eio="p" /></picture></a></figure> </div> <p><code>::variety</code> may be <a href="https://caniuse.com/css-selection" target="_blank" rel="noreferrer noopener">well tolerated by browsers</a>:</p> <figure class="wp-block-image size-large"><a href="https://s3-torquehhvm-wpengine.netdna-ssl.com/uploads/2021/12/selection-css-pseudo-element-browser-compatibility.jpg" target="_blank" rel="noopener"><picture><source srcset="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-browser-compatibility-1024x170-1.jpg.webp" type="image/webp"><img loading="lazy" decoding="async" width="1024" height="170" src="https://wpfixall.com/wp-content/uploads/2021/12/selection-css-pseudo-element-browser-compatibility-1024x170-1.jpg" alt="selection browser compatibility" class="wp-image-92145" data-eio="p" /></picture></a></figure> <h2>Abstract: CSS Pseudo Components</h2> <p>CSS pseudo components are a fab function. As you’ll see above, lots of them are very helpful so as to add small touches in your <a href="https://torquemag.io/2018/07/web-design-tips/" target="_blank" rel="noopener">web design</a>. This may take it from nice to bizarre. Plus, a few of them have a extra useful position like the power of <code>::after</code> to transparent floats.</p> <p>Pseudo components aren’t essentially the very first thing you must be told in CSS since they’re all about placing that further flourish in your web site. On the other hand, you must unquestionably pay attention to them, particularly since extra of them are popping out through the years.</p> <p>Plus, as we now have with a bit of luck demonstrated, their use is most commonly beautiful easy, so you’ll select them up briefly.</p> <p><em>What’s your favourite use for CSS pseudo categories? Please proportion your opinion within the feedback!</em></p> <p>The put up <a rel="nofollow noopener" href="https://torquemag.io/2021/12/css-pseudo-elements/" target="_blank">CSS Pseudo Elements: A Detailed Beginner’s Guide (2022)</a> gave the impression first on <a rel="nofollow noopener" href="https://torquemag.io" target="_blank">Torque</a>.</p> <a href="https://collinmedia.com/website-design/wordpress-websites/" target="_blank" rel="noopener">WordPress Agency</a><p><a href="https://torquemag.io/2021/12/css-pseudo-elements/" target="_blank">[ continue ]</a></p> </div> <div class="et_post_meta_wrapper"> <section id="comment-wrap"> <div id="comment-section" class="nocomments"> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"><span>Submit a Comment</span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/everything-else/css-pseudo-components-a-detailed-novices-information-2022/#respond" style="display:none;">Cancel reply</a></small></h3><p class="must-log-in">You must be <a href="https://wpfixall.com/wp-login.php?redirect_to=https%3A%2F%2Fwpfixall.com%2Feverything-else%2Fcss-pseudo-components-a-detailed-novices-information-2022%2F">logged in</a> to post a comment.</p> </div> </section> </div> </article> </div> <div id="sidebar"> <div id="text-2" class="et_pb_widget widget_text"> <div class="textwidget"><p><a style="display:block; text-align: center; margin-bottom: 28px" title="WordPresss Maintenance and Updates" href="/#wordpress-maintenance">WordPress® Care Plans</a></p> </div> </div><div id="search-2" class="et_pb_widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="https://wpfixall.com/"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></div> <div id="recent-posts-2" class="et_pb_widget widget_recent_entries"> <h4 class="widgettitle">Recent Posts</h4> <ul> <li> <a href="https://wpfixall.com/everything-else/new-starter-website-online-for-writers-fast-set-up/">New Starter Website online For Writers (Fast Set up)</a> </li> <li> <a href="https://wpfixall.com/everything-else/working-out-b2b2c-advertising-and-marketing-a-complete-review/">Working out B2B2C Advertising and marketing: A Complete Review</a> </li> <li> <a href="https://wpfixall.com/everything-else/the-way-to-create-and-display-habitual-occasions-in-wordpress-simple-approach/">The way to Create and Display Habitual Occasions in WordPress (Simple Approach)</a> </li> <li> <a href="https://wpfixall.com/everything-else/safety-necessities-and-9-ultimate-practices-for-tough-e-commerce-web-sites/">Safety necessities and 9 ultimate practices for tough e-commerce web sites</a> </li> <li> <a href="https://wpfixall.com/everything-else/the-best-way-to-make-your-dream-wedding-ceremony-site-5-simple-steps/">The best way to Make Your Dream Wedding ceremony Site (5 Simple Steps)</a> </li> </ul> </div><div id="categories-2" class="et_pb_widget widget_categories"><h4 class="widgettitle">Categories</h4> <ul> <li class="cat-item cat-item-1"><a href="https://wpfixall.com/category/everything-else/">Everything Else</a> </li> <li class="cat-item cat-item-10"><a href="https://wpfixall.com/category/website-security/">Website Security</a> </li> <li class="cat-item cat-item-12"><a href="https://wpfixall.com/category/wordpress-backups/">WordPress® Backups</a> </li> </ul> </div> </div> </div> </div> </div> <footer id="main-footer"> <div id="et-footer-nav"> <div class="container"> <ul id="menu-footer-bar" class="bottom-nav"><li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-88"><a href="https://wpfixall.com/">Home</a></li> <li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="/#pricing">Packages & Pricing</a></li> <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="https://wpfixall.com/partners/">Partners?</a></li> <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-89"><a href="https://wpfixall.com/wp/">WP News</a></li> <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="https://wpfixall.com/terms/">Terms</a></li> <li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://wpfixall.com/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="/#support">Support</a></li> <li id="menu-item-397" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-397"><a href="/wp-login.php?action=logout">Logout</a></li> </ul> </div> </div>  <div id="footer-bottom"> <div class="container clearfix"> <p id="footer-info">Copyright © 1997 - 2024 <a href="https://collinmedia.com" target="_blank">CollinMEDIA</a> | CollinMEDIA creates <a href="https://collinmedia.com" target="_blank">Amazing Websites</a> | PROUDLY <a href="https://wordpress.org/" target="_blank">POWERED BY WORDPRESS®</a></p> </div>  </div> </footer>  </div>  </div>  <style> #wpnp_previous{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/l_arrow_orange.png) ; top:50%; z-index:1 !important; } #wpnp_previous:hover{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/l_arrow_orange_hover.png); } #wpnp_next{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/r_arrow_orange.png) ; top: 50%; z-index:1 !important; } #wpnp_next:hover{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/r_arrow_orange_hover.png); } </style><a id="wpnp_previous_anchor" class="wpnp_anchor_js" href="https://wpfixall.com/everything-else/learn-how-to-construct-a-fullscreen-footer-with-divi/" rel="prev"><span id="wpnp_previous" class="wpnp_previous_arrow_orange"> ← Learn how to Construct a Fullscreen Footer with Divi</span></a><a id="wpnp_next_anchor" class="wpnp_anchor_js" href="https://wpfixall.com/everything-else/what-is-a-complete-stack-developer-a-information-to-complete-stack-building/" rel="next"><span id="wpnp_next" class="wpnp_next_arrow_orange"> ← What Is a Complete-Stack Developer? A Information to Complete-Stack Building</span></a> <script type="text/javascript"> (function(d,s,i,r) { if (d.getElementById(i)){return;} var n=d.createElement(s),e=d.getElementsByTagName(s)[0]; n.id=i;n.src='//js.hs-analytics.net/analytics/'+(Math.ceil(new Date()/r)*r)+'/46712829.js'; e.parentNode.insertBefore(n, e); })(document,"script","hs-analytics",300000); </script>  <script type="text/javascript" src="https://wpfixall.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" id="jquery-js-after"> /* <![CDATA[ */ jqueryParams.length&&$.each(jqueryParams,function(e,r){if("function"==typeof r){var n=String(r);n.replace("$","jQuery");var a=new Function("return "+n)();$(document).ready(a)}}); /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/plugins/anti-spam/assets/js/anti-spam.js?ver=7.3.8" id="anti-spam-script-js"></script> <script type="text/javascript" id="leadin-script-loader-js-js-extra"> /* <![CDATA[ */ var leadin_wordpress = {"userRole":"visitor","pageType":"post","leadinPluginVersion":"11.1.60"}; /* ]]> */ </script> <script type="text/javascript" src="https://js.hs-scripts.com/46712829.js?integration=WordPress&ver=11.1.60" id="leadin-script-loader-js-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" id="divi-custom-script-js-extra"> /* <![CDATA[ */ var DIVI = {"item_count":"%d Item","items_count":"%d Items"}; var et_builder_utils_params = {"condition":{"diviTheme":true,"extraTheme":false},"scrollLocations":["app","top"],"builderScrollLocations":{"desktop":"app","tablet":"app","phone":"app"},"onloadScrollLocation":"app","builderType":"fe"}; var et_frontend_scripts = {"builderCssContainerPrefix":"#et-boc","builderCssLayoutPrefix":"#et-boc .et-l"}; var et_pb_custom = {"ajaxurl":"https:\/\/wpfixall.com\/wp-admin\/admin-ajax.php","images_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/images","builder_images_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/includes\/builder\/images","et_frontend_nonce":"a59a6dd9b2","subscription_failed":"Please, check the fields below to make sure you entered the correct information.","et_ab_log_nonce":"cfdb69f49c","fill_message":"Please, fill in the following fields:","contact_error_message":"Please, fix the following errors:","invalid":"Invalid email","captcha":"Captcha","prev":"Prev","previous":"Previous","next":"Next","wrong_captcha":"You entered the wrong number in captcha.","wrong_checkbox":"Checkbox","ignore_waypoints":"no","is_divi_theme_used":"1","widget_search_selector":".widget_search","ab_tests":[],"is_ab_testing_active":"","page_id":"56676","unique_test_id":"","ab_bounce_rate":"5","is_cache_plugin_active":"yes","is_shortcode_tracking":"","tinymce_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/includes\/builder\/frontend-builder\/assets\/vendors","accent_color":"#f37121","waypoints_options":[]}; var et_pb_box_shadow_elements = []; /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/js/scripts.min.js?ver=4.27.1" id="divi-custom-script-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/jquery.fitvids.js?ver=4.27.1" id="fitvids-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/core/admin/js/common.js?ver=4.27.1" id="et-core-common-js"></script> <script type="text/javascript" id="wpnextpreviouslink-public-js-extra"> /* <![CDATA[ */ var wpnextpreviouslink_public = {"ga_enable":"0","track_view":"1","track_click":"1","track_pbr":"1"}; /* ]]> */ </script> <script type="text/javascript" id="wpnextpreviouslink-public-js-before"> /* <![CDATA[ */ wpnextpreviouslink_public.title = "CSS Pseudo Components: A Detailed Novice’s Information (2022)" ; /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/js/wpnextpreviouslink-public.js?ver=2.7.2" id="wpnextpreviouslink-public-js"></script>  <style type="text/css" media="screen"> #footer-widgets {padding-top:80px;} .footer-widget {margin-bottom:50px!important;} #main-footer { background-color:#ffffff!important;} .footer-widget .title {color:#bcbcbc!important;} .footer-widget .title {font-size:18px;} .footer-widget, .footer-widget li, .footer-widget li a {color:#ababab!important; font-size:14px;} .footer-widget li a:hover, #footer-widgets .et_pb_widget li a:hover {color:#0c71c3!important;} .footer-widget li:before {border-color:#0c71c3!important;} .footer-widget li:before {-moz-border-radius: 0!important; -webkit-border-radius: 0!important; border-radius: 0!important;} #footer-bottom { background-color:#ffffff;} #footer-bottom {padding:45px 0 30px;} #footer-info, #footer-info a {color:#bcbcbc;} #footer-info, #footer-info a {font-size:12px;} #footer-bottom ul.et-social-icons li a {color:#ffffff;} #footer-bottom ul.et-social-icons li a:hover {color:#0c71c3!important;} #footer-bottom ul.et-social-icons li a {font-size:18px;} #footer-bottom ul.et-social-icons li {margin-left:12px;} #main-content .container:before {display:none;} #sidebar h4.widgettitle {font-size:18px;} #sidebar li {padding: 0 0 4px 14px; position: relative; } #sidebar li:before {color:#0c71c3; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-style: solid; border-width: 3px; content: ""; position: absolute; top: 9px; left: 0;} #sidebar li, #sidebar li a {font-size:14px;} </style>  </body> </html>