CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6697

How can I reduce the length of the element's border?

My question is really short and clear .. I want a shorter separator than this:

.myclass{
   border-left: 1px solid;
  margin-left: 4px;
  padding-left: 4px;
  height: 3px;
}
<span>Age</span><span class="myclass">21</span>

This is expected output:

enter image description here

As you see, I've set height: 3px but still the height of that span is bigger than 3px. How can I make that border shorter?

Upvotes: 1

Views: 46

Answers (3)

Aziz
Aziz

Reputation: 7783

I guess you are trying to make the height of the border less, not necessarily reducing the height of the span tag (which contains text).

In that case, you can simply use a pseudo element (like ::before) which you can control more with CSS.

.myclass::before {
  content: '';
  display: inline-block;
  height: 3px;
  width: 1px;
  background: #000;
  vertical-align: middle;
  margin-right: 5px;
}
<span>Age</span> <span class="myclass">21</span>

Notice how the line is 3px high.

Upvotes: 4

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

Keep it simple. Just use a | character in the HTML.

Demo.

<span>Age |</span>
<span class="myclass">21</span>

.myclass {
  padding-left: 4px;
  height: 3px;
}

Upvotes: 0

Pat
Pat

Reputation: 2750

Setting the height of an inline element will have no effect. Add display: inline-block; for it to respect height: 3px;

Upvotes: 2

Related Questions