I have a set of styled links using the :before to apply an arrow.
It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :before part (the arrow).
See jsfiddle for example: http://jsfiddle.net/r42e5/1/
Is it possible to remove this? The test-style I sat with #test p a:hover:before does get applied (according to Firebug), but the underline is still there.
Any way to avoid this?
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}
<div id="test">
<p>A link</p>
<p>Another link</p>
</div>
Is it possible to remove this?
Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:
#test p a:before {
color: #B2B2B2;
content: "► ";
display:inline-block;
}
This is because the CSS specs say:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
(Emphasis mine.)
Demo: http://jsfiddle.net/r42e5/10/
Thanks to #Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.
There is a Bug in IE8-11, so using display:inline-block; alone won't work there.
I've found a solution for this bug, by explicitly setting text-decoration:underline; for the :before-content and then overwrite this rule again with text-decoration:none;
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
Working example here:
http://jsfiddle.net/95C2M/
Update:
Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in IE8:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
</style>
</head>
<body>
Testlink With no Underline on hover under before-content
</body>
</html>
You can do it adding the following to the :before element:
display: inline-block;
white-space: pre-wrap;
With display: inline-block the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap or white-space: pre.
Demo: http://jsfiddle.net/r42e5/9/
Wrap your links in spans and add the text-decoration to the span on the a:hover like this,
a:hover span {
text-decoration:underline;
}
I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/
try using instead:
#test p:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
will that do?
use this
#test p:before {
color: #B2B2B2;
content: "► ";
}
Related
how can i make an indent for hyperlink ?
I've tried as this code but no success.
a {
text-decoration: none;
text-indent: 20px;
}
html
If you don't want all hyperlinks to be indented, you could wrap it around a <div> with a unique id; this is an alternate solution.
HTML:
<div id="indented">
html
</div>
CSS:
a{
text-decoration:none;
}
#indented {
text-indent:20px;
}
text-indent is not avalaible for inline elements
https://www.w3.org/wiki/CSS/Properties/text-indent
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
display: inline-block;
}
html
padding could help
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
padding-left:20px;;
}
html
Put this into a CSS file and link it to your HTML file using the link tag:
a {
text-decoration:none;
text-indent:20px;
}
My strong suggestion is go with the CSS file, it's a lot cleaner and allows you to target more elements, not just that specific anchor tag
text-indent is for block or inline-block elements. So you can assign display: inline-block; or display: block; to the a tag and get the desired effect. Here's a demo http://codepen.io/anon/pen/WRvOQd
Demonstration: http://jsfiddle.net/DerekL/85LNE/
Right now I have the following CSS style applied to links to add separators:
div > a{
color: #2679c1;
text-decoration: none;
}
div > a:hover{
color: #3096fb;
text-decoration: underline;
}
div > a:not(:last-child)::after{
content: ' ‧ ';
}
This works however when I hover over the link, the separator are also underlined. I was hoping by adding the following rule it would solve the problem, but it apparently has no effect:
div > a:not(:last-child):hover::after{
text-decoration: none;
}
Any solutions? (I don't really want to wrap the content with a <span> because it defeats the purpose of using CSS to simplify the process of adding the separators.)
JSFIDDLE
Try adding the display:inline-block; to your a:not(:last-child)::after.
You can add white-space: pre-wrap; to make the . appear with the same gap.
a:not(:last-child)::after {
content: ' ‧ ';
display:inline-block;
white-space: pre-wrap;
}
I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:
.faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
<p class="quetn">5.14 Where do i see my test results?</p>
One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.
Just use the same rule for when the link is not being hovered:
.faq .section p.quetn a, .faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
EDIT
Juse seen that you can't change the CSS for some reason.
Just create a new class with the same styles.
a.class, a.class:hover {
text-decoration:underline;
font-weight:bold
}
<a class="class" title="" href="#">Some Link</a>
EDIT v2
Do you want to style the text but remove the link markup?
It would just be
<p class="class">Text</p>
p.class {
text-decoration:underline;
font-weight:bold
}
Like this
demo
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
}
Then instead using
.faq .section p.quetn a:hover
use
.faq .section p.quetn a
If you are targeting only P tag instead of anchor tag, then use it as below :
.faq .section p.quetn
html
<p class="quetn newClass">5.14 Where do i see my test results?</p>
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
cursor:default;
}
.newclass a:hover{
text-decoration:none; !important
font-weight:bold; !important
cursor:default; !important
}
Use !important for priority.
Code below for Hover Enable
a:hover {
background-color: yellow;
}
Code below for Hover Disable
a:nohover {
background-color: yellow;
}
When I copied some necessary codes to jsfiddle it works correctly but it is not working in my website.
My key problem with Tab menus like Our Rooms, Our Gems are not working perfectly when I hover there.
this is the site in which hover is not working correctly
this is working jsfiddle
Edit
I think the main problem is difficult to understand. So I'm giving a hint. Just change #tabs li a with height: 200px; then you'll see the pointer is not hovering over the text but below the text.
I assume that you want a pointer on the entire tab, so you need to modify your class like this on line 1877 in template.css
#tabs li a {
color: #E79D34;
display: block;
font: 20px/50px calibri;
height: 100%;
text-decoration: none;
}
It works in your fiddle because the CSS is NOT normalized, in your website, CSS is normalized.
Demo of not working fiddle
The issue is your h1 tag having class logo, it is overlapping your tabs
Try this
a:hover, #tabs li a:hover {
color: #FFF;
text-decoration: none;
}
In your code there is something that overwrites your :hover. It is either an !important keyword or another definition of :hover after the one you try to fix. Review your code or try using !important in the hovered block.
coz
you have made
a
{text-decoration:none;
}
a:hover
{text-decoration:none;
}
there is no difference in a & a:hover
change something in a:hover
Add this to your style, this will work
#tabs li:hover {
cursor: pointer;
}
you can also do it this way:
#tabs li a,
#tabs li:hover,
#tabs li a:hover {
cursor: pointer;
}
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>