I have noticed that if an element, such as span or p, has a display of inline-block then it will cover the underline style of an anchor when placed inside.
<span style="display:inline-block">test</span>
<p style="display:inline-block">test</p>
Is there a way to prevent this?
add to the style tag text-decoration:inherit;
1) Move the style to the A-tag
test
or
2) Add underline to the child element
<p style="display:inline-block;text-decoration:underline">test</p>
Add following style:
a *:hover { text-decoration: underline }
DEMO
Related
I have an span that contains a p-tag and text. Now I want to add an underline effect on hover. But I only want to underline the Text, in this case 'Tree', but not the 'Test'. Unfortunately I can not add anything to the 'tree'. I can not remove the underlining in the p-tag with text-decoration: none.
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
Any ideas?
It's not possible.
Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
I'd suggest put a span around "Tree" and add the effect to that.
If that's not possible, you could add the effect to the span and remove it from the p-tag. But i'd rather have no effect than doing that ;)
Edit: I was more enthusiastic, ignore the second idea.
For this very specific case, and if it is truly not possible to add a span around the text node or to alter the styling of the p element, then you can get the effect with a bottom border - but it's only for specific cases:
<style>
#underline {
border-style: none none solid none;
}
</style>
<span id="underline">
<p id="noUnderline">Test</p>
Tree
</span>
I'm using an Icomoon icon font to add an icon on the :before element of an <a>. It works great but the text-decoration: underline only covers the icon, and then the text in the anchor. There is a blank, not underlined section between the two.
How can I make the underline extend across both the <a> tag and its pseudo elements?
Rather than text-decoration: underline you could work around that by giving to the anchor a couple of properties like display: inline-block plus a width and finally a border-bottom. Just a thought
I was wondering how I can remove display:none from all child spans
<span class="tooltip">
<span>Content goes here along with other spans</span>
</span>
.tooltip span {
display:none;
}
What I need is for the span inside of the tooltip span not to take the display none effect, I understand that I could a div for one of them instead but how I have the tooltips setup and how it works within wordpress I need to use all spans. Thanks
you most remove the 'tooltip' class
from Child spans ancestor
you can do it with JQuery
$('.tooltip').removeClass('tooltip')
I have my span tag:
<span style="text-decoration:line-through" > Hello World Yahoo </span>
As you can see I have applied line-through on span. But this results in line-through on anchor tag too. How do I prevent line-through on anchor tag. I don't want strike on my anchor tag.
Note: Please don't ask me to move my anchor tag outside of span tag! If I could do that I wouldn't be asking this question.
[From CSS text-decoration property cannot be overridden by child element ]
text-decoration specs state:
The 'text-decoration' property on descendant elements cannot have any
effect on the decoration of the ancestor.
text-decoration-skip, as mentioned in the linked question is supported by neither the latest version of Chrome, nor Firefox
I don't know if this is acceptable to you, but since the solution below doesn't work, this might be your only way to do it:
<span>
<span class="strikethrough">Hello </span>
World!
</span>
.strikethrough {
text-decoration: line-through;
}
It is valid to nest span elements. Are nested span tags OK in XHTML?
Doesn't work:
The property will be inherited by the child by default. If you do not want that, override it.
span > a {
text-decoration: none;
/* or perhaps
text-decoration: underline;
*/
}
This will ensure all anchor elements that appear as a direct descendent of a span element will not have a strikethrough.
I have the following markup:
<a><div class="action_button">Log In</div></a>
I have styling on .action_button to make it bigger and have a background etc.
I also have styling on .action_button:hover to make it have a lighter background and an inset shadow when the user hovers on it.
How do I apply styling to the anchor tag that surrounds it, but only when it surrounds a .action_button div.
For example, this works:
a:hover {
text-decoration:none;
}
But it affects all links, I only want to affect those that surround the .action_button divs.
Why not just:
<a class="action_button"></a>
CSS:
.action_button {
text-decoration: none;
display: block;
/* other styles */
}
I don't see the point of having a DIV inside an A. If you want the anchor to be a block, just set display: block on that anchor directly.
a .action_button:hover{
text-decoration:none;
}
I would change the code around slightly - the <a> should be nested inside the <div>, as the div is a block element and the anchor tag is inline.
Then you can simply use the following:
<style>
.action_button a {text-decoration:underline; }
.action_button a:hover {text-decoration:none; }
</style>
I think you need to add a class to the "a" element that contains the button. you can't build a selector that works in the other direction.
You can use JQuery to add a class to every "a" that has a div with the class .action_button
$("a").has("div.action_button").addClass("myclass");
And then, obviously, use that class to select your "a" tags.
http://api.jquery.com/has/