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;
}
Related
Googled myself stupid, still couldn't seem to find any information on it. Following issue:
Adding an ::after selector to a link adds it as part of the link. Is there a way that the ::after selector will not extend the link (be text only, not clickable)? See example, is there a way, that the "»" will not be part of the link?
Example:
a::after {
content: " »";
}
Test
Make its width 0 and add pointer-events: none;
a::after {
content: " »";
display:inline-block;
margin-left:8px;
width:0;
pointer-events: none;
}
a {
font-size:35px;
margin-right:20px; /* to avoid overflow issue and cover the area of the pseudo element */
}
Test some text after
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
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;
}
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
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: "► ";
}