0

I need to have same height for title-subline element but the 2nd one is a bit smaller.

I really do not know why this happens (maybe they have same size on your screen because it's ok on my monitor but not on my laptop).

Html output image:

html output

.title-subline {
  position: relative;
  padding: 0;
  height: 2px;
  background: #e5e5e5;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  margin-top: 20px;
}

.title-subline::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: inherit;
  width: 70px;
  background: #0C6638;
}
<div class="title-subline"></div>
<div class="title-subline"></div>
<div class="title-subline"></div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Arash Younesi
  • 1,671
  • 1
  • 14
  • 23
  • They appear identical to me. Does the snippet show the problem? – isherwood Feb 22 '21 at 17:22
  • 1
    Do you mean that it appears fainter than the first and third in the image? This is likely due to sub-pixel rounding when the display is scaled. – isherwood Feb 22 '21 at 17:24
  • I suspect this is a side-effect of having to align CSS pixels to the display's physical pixel grid. At some display resolutions the line is going to land where you'd need a half-pixel in each direction to get a 2-pixel line. The display can't do half-pixels so there are tradeoffs. – ray Feb 22 '21 at 17:26
  • For example: https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in – isherwood Feb 22 '21 at 17:26
  • @isherwood. Yes, the second one is fainter. not just the second one => 2, 4, 6 , ... if I add – Arash Younesi Feb 22 '21 at 17:29
  • Ok. There's a lot to be found on SO about that already. Good luck. – isherwood Feb 22 '21 at 17:30
  • For me, with Firefox the 2nd line is smaller, with Edge it appears fainter (the size is ok) on a ~21" screen. – AcK Feb 22 '21 at 17:30

0 Answers0