Can't solve this html/css problem

plead with any one reading this, please help me solve this problem I have spent hours trying to figure it out. There is this red line in the footer shown here https://imgur.com/a/cufBMTd specifically the red line that sits under the social section in the footer. Note. I made all 3 of these lines the same way except the one that sits under the social section changes position slightly everytime i refresh but the other red lines stay the same?? wtf is happening I can’t figure it out?

You seem to be using a lot of magic numbers with percentage widths and margins. It looks like your doing that to get your red border to follow the width of the text in your headings.

It would be very simple if you could just work with a bottom border on the h tag and then use text-decoration to underline the text. That won’t work I’m afraid because the text-decoration follows the font color.

You can shrinkwrap your heading by setting it to inline-block or float and your bottom border would follow the width of the text.

Here’s a couple of things that come to mind…

If you don’t mind nesting a span in the h1 then you will have a shrink to fit container and two elements to give bottom borders to.

Like so…


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

h1 {
  border-bottom: 2px solid #ccc;
}
h1 span {
  border-bottom: 2px solid red;
  display:inline-block;
  margin-bottom:-2px; /*drag it down on the h1 border*/
}

</style>
</head>
<body>

<div class="social">
  <h1><span>Social</span></h1>
</div>

</body>
</html>

Or you can use a pseudo :after for your red border and actually duplicate the text so your width gets set, then set the color to transparent.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

h1 {
  border-bottom: 2px solid #ccc;
  position:relative;
}
.social h1:after {
  content:'Social';
  color:transparent;
  position:absolute;
  left:0; top:auto;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<div class="social">
  <h1>Social</h1>
</div>

</body>
</html>

Both those methods render the same in the browser and your borders auto align.

1 Like

…and just for fun :slight_smile:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
h1 {
	padding-bottom:2px;
	position:relative;
	overflow:hidden;
}
h1:before {
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:#ccc;
	z-index:1;
}
h1:after {
	content:'';
	display:inline-block;
	vertical-align:bottom;
	position:relative;
	top:2px;
	border-bottom: 2px solid red;
	padding-left:999em;
	margin-left:-999em;
	z-index:2;
}
</style>
</head>
<body>
<h1>Social</h1>
</body>
</html>
1 Like

That’s an old equal height columns trick, flipped sideways, isn’t it?:slightly_smiling_face:

1 Like

Yep you got it :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.