I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.
Related
I don't know if it's possible, or advisable even if it is. I'm using phpBB 3.2.3 I've replaced every instance of the word underline in styles/prosilver/theme/links.css with the word none. After doing that, I then changed the following line of code,
.postlink {
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 0;
}
to
.postlink {
text-decoration: none;
border-bottom: 0px solid transparent;
padding-bottom: 0;
}
And I changed the following code from styles/prosilver/theme/colours.css
.postlink {
border-bottom-color: #368AD2;
color: #368AD2;
}
.postlink:visited {
border-bottom-color: #5D8FBD;
color: #5D8FBD;
}
to
.postlink {
color: #368AD2;
}
.postlink:visited {
color: #5D8FBD;
}
I then purged the forum's cache and ctrl+f5'd my browser. Links now appear without an underline but only until I click, after which an underline appears. Is there any way for me to stop that underline from appearing? Or should I even try?
I found the answer elsewhere on this site!
I had to add the following line of code to the bottom of styles/prosilver/theme/links.css
a, a:hover, a:active, a:visited, a:focus {
text-decoration:none;
}
That did the trick! Now I'm not getting any underline at all!
Given this HTML that declares the tags-input directive:
<tags-input class="bootstrap" ng-model="selected">
<auto-complete source="getList($query)"></auto-complete>
</tags-input>
This CSS doesn't change the border to blue:
.bootstrap .tags {
border: 1px solid blue;
}
This CSS doesn't change the border to red when ngTagsInput gets the focus
.bootstrap .tags:focused {
border-color: red;
}
If you see the HTML when tags-input is in focus, it applies a focused class when the input is focused. We can utilize that class to override our CSS.
I put the following CSS and it works for me:
.bootstrap .tags{
border: 2px solid blue;
}
.bootstrap .tags.focused {
border: 2px solid red;
}
And, what you tried to do in question (:focused) is not a pseudo-class, :focus is! :)
Here's the sample working plunker
I have Dreamweaver CS6. How do I keep my link colors from changing colors? No choice for none. All I'm given is default which is blue and other color choices. I have it set to hover red, works fine. Any suggestions?
So far I have:
a:hover {
text-decoration: none;
color: #F00
a:link {
text-decoration: none;
color: none;
I have a paper-droopdown-menu that displays normally. But I would like to change the backgroud colour as shown in the graphic below
I have tried the following but it did not affect the background.
* /deep/ paper-dropdown-menu::shadow #menu {
background-color: #eee;
border: 1px solid #ccc;
}
paper-dropdown-menu {
background-color: red;
}
or just the input element
paper-dropdown-menu::shadow #control {
background-color: red;
}
If this isn't what you want, can you please add the HTML to your question that produces the layout you have in your screenshot.
Does anyone know how to make CSS link hover properties work for links that don't link to another html page or anchor?
For example this works:
Page1
Link
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
But the moment I change the link to something that's not an anchor or an html file, let's say a mailto:
<a href='mailto:bla#bla.com'>Send email</a>
It no longer changes color when I hover over the link.
Why is this?
You are overriding your own styles. Try
<style type="text/css">
a:link, a:visited
{
color: #555;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #fff;
text-decoration: none;
}
</style>
You don't need to do a:link, just a will do fine when defining your anchor tag style, however, if for some reason you do need it then you need to define your hover style more specifically than your link style.
a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
or
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}
will fix your problem