Because CSS text underline only allows a solid line and its position is right at the bottom of strings, I'm using border-bottom plus a little padding to achieve dotted or dashed text underline.
h2{border-bottom:1px dotted #999; padding-bottom:5px;}
now, the problem is, when the heading (or paragraph, or whatever element) text takes 2 lines or more, the dotted underline simply does what every border does, which is stay on the bottom of the block element. If I use text-underline style, the underline stays with the text, but text-underline only supports a solid line, and as far as I know, no padding.
So how do I display multi line texts with dotted or dashed underline ?
Thanks
h2 {
border-bottom: 1px dashed #999;
display: inline;
}
So you receive what you need.
But you have to keep in mind that <h2> is then (of course) no longer a block element. But you can "avoid" that by putting a <h2> in a <div>.
A "bit" late, but there's a way with text-decoration-style and text-decoration-line to customize the underline in some browsers.
.underline-dashed {
decoration-line: underline;
decoration-style: dashed;
}
Example:
.underline-dashed {
text-decoration-line: underline;
text-decoration-style: dashed;
}
This is some <span class="underline-dashed">dashed underlined</span> text.
I was also facing similar issue but with <a> tags. In my case it was css float property that was causing the border to appear only under the last line. So I enclosed the <a> tags with <span> tags and moved the css float:left to <span>. It fixed the issue now bottom border appears under all the lines whenever a long link is wrapped to fit the containing div.
The revised css style and HTML structure is as follows:
a { border-bottom:1px dotted red; }
span.nav-link { float:left; }
<span class="nav-link">Test link</span>
Hope it helps someone.
Thanks,
text-decoration: underline dotted;
text-decoration: underline dashed;
Related
I often use a-tags for buttons, so they have a padding that makes them button like.
How do I change the thickness of the text-decoration underline? People often recommend to use a border-bottom for this, but
A bottom border is something else than underlining, some letters even extend below an underline. Underlining is far more sophisticated than a line below something.
I already use the padding of the elements in question as explained.
I have tried to use a a:hover:after selector to actually have a border-bottom anyway. It seems like css is not giving me a lot of alternatives like text-decoration-underline-height or something similar.
I will then in some way alter the height of that pseudo element to emulate underlining without having a one centimeter distance from the text to the "underline".
It doesn´t seem like the :after pseudo-tag is created using this css-selector. Some have managed to do this, but I do not. So there is nothing to create the hateful border-bottom in.
How do I proceed? Will a proper way of styling text-decoration: underline style underlining be added to css?
Until then, how to underline text using a line of desired thickness?
You could do this using the :after pseudo selector. One of the reasons you cited for not wanting to fake the underline was that you wanted descenders to extend below the underline. Well, you could just use a negative margin on the faked underline to accomplish that(notice how the descender of the p is overlapping the underline):
a {
display:inline-block;
text-decoration:none;
color:red;
}
a:hover {
color:blue;
}
a:hover:after {
background:red;
}
a:after {
display:block;
content:'';
width:100%;
height:4px;
background:blue;
margin-top:-2px;
}
Sample link with descender
I tried using APAD1's method to create an underline and I spent at least 20 minutes thinking there was something wrong with how I was doing it. I couldn't get it to work at all on FireFox, so I came up with this method which worked like a charm for those who might be having trouble.
a{
display:inline-block;
color:red;
text-decoration:none;
border-bottom:4px solid blue;
}
a:hover{
color:blue;
text-decoration:none;
border-bottom:4px solid red;
}
Sample underline
You can also use the padding-bottom property to distance the border from the text. You can't pull it closer though, which I assume shouldn't be a problem since you aren't wanting it too close to begin with.
You could consider using a box-shadow, like this:
a
{
box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
text-decoration: none;
padding-bottom: 5px;
}
My super link
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
see definition: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
The downside of this solution is, that the outline is not clickable.
To overcome this, you can do something like this:
a
{
box-shadow: 0 -5px rgba(0,0,100, 0.5) inset;
text-decoration: none;
padding-bottom: 10px;
}
Totally clickable
I was finding out what the best method is for the next thing.
I want to give every section a border-bottom, but when there is a section that has followed up by a specific section it should not show the bottom border.
<section></section> <!-- has border-bottom -->
<section></section> <!-- THIS ONE SHOULD NOT HAVE A BORDER BOTTOM, BECAUSE UNDER THIS SECTION IS A SPECIFIC SECTION WITH A CLASS -->
<section class="highlight"></section> <!-- has border-bottom -->
<section></section> <!-- has border-bottom -->
Since there is no previous selector, you could fake a border-bottom by adding a border-top on the sections and simply not include one on both the section:first-of-type & .highlight class; also, add a bottom-border to the :last-of-type like so:
section { border-top: 3px solid #aaa; }
section:first-of-type, .highlight { border-top: none; }
section:last-of-type { border-bottom: 3px solid #aaa; }
.highlight { background: yellow; }
JSFiddle
Edit: Typos & basic clarification.
There won't be a CSS answer for you. Because there is no previous child selector in CSS until now which you can use and apply to remove the border from that element.
To check for the next element. You need to use JavaScript. CSS won't check for the elements next to the current element.
You can however use CSS to select a specific child using
section:nth-of-type(2) {
border: 0;
}
But remember, you cannot apply a condition in a CSS language. You need JavaScript for that.
I have a small space in my main navigation menu at:
http://ranchocordovaeventscenter.com/
I can't seem to find any css that is causing it to do this.
Can anyone help?
Thanks in advance,
Matt
Since your setting the list elements to inline-block. It's creating spaces between each element as if it's text ( words should have spaces between them, it makes sense if you think about it ).
.nav-menu {
font-size: 0;
}
Just make sure you reset the font-size on the children or else they will inherit this size and be illegible.
I don't see the space you are talking about, but something similar happened to me earlier.
CSS Box Model Puzzle - I must be missing something
The key is is the following piece of css code:
box-sizing: border-box; /* needs prefixes for webkit/moz */
Try including this css property for the container divs you may have.
Hope this helps!
The problem is that each anchor tag <a> inside the <li> element have borders in both sides...
To solve this, add border-right-width here:
.main-navigation li a {
border-right-width: 1px solid #F9B233;
}
and remove the following property in the above selector:
border-width: 1px solid #F9B233;
To remove the right border of the last element you can do this:
.main-navigation li:last-child a
{
border-right-width: 0;
}
How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".
This is what I am trying to do.
Link 1 | Link 2
Put it in an element, and style the element:
<span class="bar">|</span>
In your style sheet, for example:
.bar { font-size: 20px; }
You shouldn't be using the pipe (|) as a separator, use css instead.
Say the anchors were in a div, with id equal to breadcrumbs, like this:
<div id="breadcrumbs">
One
Two
Three
</div>
You could then add separators between them with a couple css rules, like this:
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}
You could vary the size, style and color of the separator with the border-right: 5px solid green rule. Here's an example(updated) in action. Here's some documentation on border styling.
The second rule with :last-child prevents an extra separator after the last element.
To vary the height of the separator, you would change the padding on the first rule.
By popular demand, a list version:
If you put the links in a list:
<ul id="breadcrumb-list">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
And use rules like this:
ul#breadcrumb-list li {
display: inline-block;
margin: 0;
padding: 1em 1em 0 1em;
border-right: 1px dotted blue;
}
ul#breadcrumb-list li:last-child {
border-right: none;
}
You can use a ul to markup your list of links for better semantics. You have to add the inline-block to put them on one line, li is by default a block level element.
I've also shown a different style you can achieve by varying the padding and border rules.
| is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use | to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.
You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span> tags whenever it occurs in the text you want to style it in.
You can also just use another unicode vertical-bar character which is more to your liking.
edit, In response to:
"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"
Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:
emulate-with-a-span technique - (live demo):
.linkSeparator {
display:inline-block;
margin-bottom:-1em; /*value should be (height-1em)/2*/
height:3em; width:0.25em;
background-color:grey;
margin-left:0.5em; margin-right:0.5em;
}
link1<span class="linkSeparator"></span>link2<span class="linkSeparator">...
images technique:
You could also use images (less elegant, won't go into detail).
sibling selector technique - (live demo):
You can also set the border-left on all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + F Matches any F element immediately preceded by a sibling element E." Therefore:
.separatedLinks a+a {
border-left: 2px solid black;
}
<??? class="separatedLinks">
link1
link2
link3
</???>
You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html
I wonder if there is any trick to solve this problem.
I have my link as below text and want to change the underline color.
This link contains in many lines which needs to change the underline color to be lighter than the existing one
Using border bottom is not the way to solve this because multiple lines.
are there any trick to solve this?
EDIT
#Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?
If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:
<span class='underline'>
this just<br>a test<br>of underline color
</span>
And then the CSS:
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
And you get what you want.
EDIT:
Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...
In case anyone is interested - this worked for me - text-decoration-color CSS property:
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
2121 update: this works great! Other useful CSS is https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset for controlling the distance between the underline and the text.
Paolo Bergantino's answer didn't seem to work for me in Chrome on OSX (v19.0.1084.56). However moving the span inside of the a tag seemed to do the trick.
The HTML
<a class="underline" href="#">
<span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>
And the CSS
.underline {
color: red;
}
.underline span {
color: gray;
}
You can view it here: http://jsfiddle.net/itsmappleby/f4mak/
Or you can use border. This method work at ie6.
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
and example: http://jsfiddle.net/skanY/1/embedded/result/
Underlined, being a text attribute, inherits the text's color. So I doubt there is a way to explicitly change the underline color without also changing the text color.
The Underlining of links will always be the same color as the text.
sorry for ressing an old question, but i was having the same issue, and didn't find a satisfying answer, so i came up with a different solution and thought i'd share it with you.
it does include a 1x1 background image (or whatever size you prefer), but it's clean and simple - and 100% browser compatible (tested from IE6 and up).
this example has text that changes color, and the underline stays the same. you can just as easily do it other way around.
a, a:link, a:active, a:visited{
text-decoration:none;
color:#888;
background:transparent url('underline.png');
background-position:0 10px;
background-repeat:repeat-x;
}
a:hover{
color:#009ee0;
}
I know this is an old question, but I thought I'd add this...
a:active, a:link, a:visited{
background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
text-decoration: none;
background-size: 2px 2px;
background-position: 0 1.2em;
background-repeat: repeat-x;
}
Note: Older browser support is not completely supported
USE:
<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">
the underline on links is done using the text-decoration css style, i think it's the same color as the text.
if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.
Also you can use this code to make underlines with different color. Use the Borders
h1{
border-bottom: 1px solid #AAAAAA
}
edit:
you can use java script to draw a line under the text