CODEWITHSUNDEEP
htmlcss
NoNameProvided
NoNameProvided

Reputation: 8987

How put some horizontal offset to an element bottom border with CSS?

I use bottom-border on some a element, and I want to add some horizontal offset to the border.

What I have now:

Link very cool name
-------------------

What I want: 

Link very cool name
   ----------------

How can I archive this? Only using an a element.

Upvotes: 1

Views: 2454

Answers (4)

user4689071
user4689071

Reputation:

you can use span

HTML

<a href="">Link <span class="un">very cool name</span></a>

CSS

.un{
border-bottom: dotted 2px red;
   }

Upvotes: 1

Jamie Paterson
Jamie Paterson

Reputation: 446

You could use a pseudo element ie :after element for this and abs pos it, 1px high background colour and width of you chosen link length etc. Would that be the required result? Not sure the requirement as to why you would want this but it should achieve the required result.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115278

A pseudo-element is ideal here which can be styled in any fashion you want, color, width & height...even position below the link text.

a {
  position: relative;
  text-decoration: none;
}
a::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 75%;
  height: 2px;
  background: orange;
}
<a href="#">Long stretch of text</a>

Upvotes: 3

marcelo2605
marcelo2605

Reputation: 2794

You can try this:

a{
  text-decoration: none;
  display:inline-block;
}

a:after{
  content: "";
  border-bottom: dotted 2px red;
  width: 70%;
  float: right;
  padding-top: 5px;
}

https://jsfiddle.net/9xc0x58c/1/

Upvotes: 1

Related Questions