Codes Tagged css

pseudo element in css with example

<p><strong>pseudo-element</strong> in CSS is a keyword added to a selector by that you can style a specific part of the selected element. </p><p>For example:- </p><ul><li>You can style the <strong>first letter </strong>or <strong>line </strong>of an element.</li><li>Insert content <strong>before </strong>or <strong>after </strong>the content of an element.</li></ul><p><br></p><pre class="ql-syntax" spellcheck="false">selector::pseudo-element { property:value; } </pre><p><br></p><p><strong>::before </strong>- Creates a <strong>pseudo-element </strong>which is the first child of the selected element. <strong>::before </strong>is inline by default </p><pre class="ql-syntax" spellcheck="false">.classname::before{ content:'Hello'; } </pre><p><br></p><p><strong>::after </strong>- Creates a <strong>pseudo-element </strong>which is the lastchild of the selected element. <strong>::after </strong>is inline by default </p><pre class="ql-syntax" spellcheck="false">.classname::after{ content:'Hello'; } </pre><p><br></p><p><strong>::first-letter </strong>it applies style on the first letter of the first line.</p><pre class="ql-syntax" spellcheck="false">span::first-letter{ font-size:50px; } </pre><p><br></p><p><strong>::first-line </strong>it applies on the first line of the block level element.</p><pre class="ql-syntax" spellcheck="false">p::first-line{ color:red; } </pre><p><br></p><p><strong>::placeholder </strong>it applies on the input or textarea placeholder text.</p><pre class="ql-syntax" spellcheck="false">input::placeholder{ color:red; font-size:20px; } </pre>

BBBootstrap Team2 years ago

cfgbAdd a Code snippet

<p>fhgfhgcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippetcfgbAdd a Code snippet</p>

BBBootstrap Team7 months ago

Add a codeAdd Code

Remove adsremove

Latest codes

Latest Snippets

Quick Links

Tools

Socials

© 2024 bbbootstrap. All rights reserved