How to make text underline css - html

Question

I have two <a> tags and I need them to be underlined like this:
(notice that I can't use border-bottom: dashed 10px because lines are thin but the space between them is quite big.
HTML:
text1
text2
CSS:
.t1 {
color: #8bb09e;
}
.t2 {
color: #ffee90;
}

Answer 1

There is 2 approaches, but this approach would be the usage of the border-bottom: value;
.t1 {
border-bottom: 1px dashed #333;
}
If you want to use some other style that isn't going to happen. Like the space you're talking about. Then you're more likely to be using an image for the bottom border and create a border-like-effect.

Answer 2

If you can give the anchor a position:relative attribute, I would use an absolutely positioned pseudo element. You can use a background image or a linear gradient like I did in my demo
Demo: http://jsfiddle.net/6Jzu6/1
a {
position: relative;
...
display: block;
...
}
a:after {
content: '';
position:absolute;
height: 1px;
width: 100%;
top: 100%;
left: 0;
background-image: -webkit-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -ms-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -o-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: linear-gradient(left, transparent 50%, #8b0 50%);
background-size: 20px 20px;
}
Edit: Oops! credit where credit is due. I got the linear gradient concept from this source

Answer 3

This is all you need :)
.t1 {
display:inline-block; /* make width equal to link content */
padding-bottom:5px; /* margin between underline and text*/
border-bottom:1px dashed red; /* height type and color of underline */
}
Edit
What you need is an addition of min-width property added to your <a> styles.check the demo
Demo

Answer 4

Here's a method I've used in the past. It uses a pseudo element that acts as a border.
http://jsfiddle.net/h7Z9K/
p {
display: inline-block;
position: relative;
}
p::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px dashed #000;
position: absolute;
left: 0;
bottom: -0.5em;
}
Adjust the position of the pseudo element border relative to the element by adjusting its bottom position.

Answer 5

.t1 {
color: #8bb09e;
border-bottom-style: dashed !important;
width:30%;
text-align:center;
display:inline-block;
}
.t2 {
color: #ffee90;
text-align:center;
border-bottom-style: dashed !important;
float:right;
width:30%;
}
text1
text2