Styling different states of a link using CSS

CSSWeb DevelopmentFront End Technology

<p style="">Using CSS pseudo selectors, namely, :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors is given by:- :link, :visited, :hover, :active.</p><h2>Syntax</h2><p style="">The syntax of CSS text-indent property is as follows &minus;</p><pre class="result notranslate" style="">a:(pseudo-selector) { &nbsp; &nbsp;/*declarations*/ }</pre><h2>Example</h2><p>The following examples illustrate the styling of different states of a link &minus;</p><p><a class="demo" href="http://tpcg.io/lzuobqOv" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div { &nbsp; &nbsp;margin-left: 20px; &nbsp; &nbsp;display: flex; &nbsp; &nbsp;float: left; } a:link { &nbsp; &nbsp;color: navy; &nbsp; &nbsp;text-decoration: none; } a:visited { &nbsp; &nbsp;color: yellowgreen; } a:hover { &nbsp; &nbsp;color: orange; &nbsp; &nbsp;text-decoration: wavy underline; } a:active { &nbsp; &nbsp;color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div&gt; &lt;a href=&quot;#&quot;&gt;Demo link &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;a href=&quot;&quot;&gt;Demo visited link&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This gives the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link.jpg" class="fr-fic fr-dib" width="336" height="71"></p><p>On hovering the first link, we get the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link1.jpg" class="fr-fic fr-dib" width="324" height="78"></p><p>While clicking the second link, we get the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link2.jpg" class="fr-fic fr-dib" width="315" height="78"></p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/KRroj4n6" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div { &nbsp; &nbsp;display: flex; &nbsp; &nbsp;float: left; } a { &nbsp; &nbsp;margin: 20px; &nbsp; &nbsp;padding: 10px; &nbsp; &nbsp;border: 2px solid black; &nbsp; &nbsp;text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black; &nbsp; &nbsp;font-size: 1.1em; } a:link { &nbsp; &nbsp;text-decoration: none; } a:visited { &nbsp; &nbsp;color: blueviolet; } a:hover { &nbsp; &nbsp;color: orange; &nbsp; &nbsp;font-size: 150%; &nbsp; &nbsp;font-weight: bold; &nbsp; &nbsp;box-shadow: 0 0 5px 1px grey; } a:active { &nbsp; &nbsp;color: red; &nbsp; &nbsp;box-shadow: inset 0 0 15px red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;a href=&quot;#&quot;&gt;Kapow!&lt;/a&gt; &lt;a href=&quot;&quot;&gt;Dishoom&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This gives the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link3.jpg" class="fr-fic fr-dib" width="284" height="123"></p><p>On hovering the first link, we get the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link4.jpg" class="fr-fic fr-dib" width="236" height="138"></p><p>During the click of the first link, the following output is returned.</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33925/Styling_different_states_of_link5.jpg" class="fr-fic fr-dib" width="296" height="152"></p>
raja
Updated on 06-Jan-2020 10:41:05

Advertisements