CODEWITHSUNDEEP
htmlcssunderline
user2950593
user2950593

Reputation: 9647

How to make text underline css

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.

my text

.t1 {
  color: #8bb09e;
}

.t2 {
  color: #ffee90;
}
<a href="" class="t1">text1</a>
<a href="" class="t2">text2</a>

Upvotes: 1

Views: 2117

Answers (6)

Penny Liu
Penny Liu

Reputation: 17498

A simple solution is using text-decoration-line: underline.

body {
  background-color: #d3d3d3;
}

a {
  font-family: sans-serif;
  font-size: 2rem;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
  text-underline-offset: 1rem;
}

a~a {
  padding-left: 20px;
}

.t1 {
  color: #8bb09e;
}

.t2 {
  color: #ffee90;
}

a::after,
a::before {
  content: "___";
  color: transparent;
}
<a href="" class="t1">Text1</a>
<a href="" class="t2">Text2</a>

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2221

.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%;
}
<a href="" class="t1">text1</a>
<a href="" class="t2">text2</a>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78580

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

Upvotes: 1

Nick Angiolillo
Nick Angiolillo

Reputation: 496

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.

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15921

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

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 2

Related Questions