Note that there are some explanatory texts on larger screens.

plurals
  1. POUse CSS3 or Javascript to add » to a link on hover
    primarykey
    data
    text
    <p>For my menu of a website I want to add text-decoaration on a:hover to be the &raquo; sign/symbol.</p> <p>I tried it like this:</p> <pre><code>.navbar .nav &gt; li:before &gt; a:hover { content: "&amp;raquo;"; padding-right: 10px; color: #fff; } </code></pre> <p>like a different question suggested, but what displays is the text not the symbol and in its active state. is my CSS wrong or is there a way to do this through Javascript with a rollOver?</p> <p>And here is my HTML:</p> <pre><code>&lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;a class="brand" href="#"&gt;Rapid Newsletter Plus&lt;/a&gt; &lt;div class="nav-collapse collapse"&gt; &lt;ul class="nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#packages"&gt;Packages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav pull-right"&gt; &lt;li&gt;&lt;a href="http://plus.rapidnewsletter.com"&gt;&amp;raquo; my Account&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>UPDATE: I tweaked my CSS a lil bit and now the >> shows up in it's text form but it's not translating to the symbol >>. Any thoughts?</p> <pre><code>.navbar .nav &gt; li &gt; a:hover:before { content: "&amp;raquo;"; color: #fff; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload