0

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  font-family: Georgia;
  font-size: 30px;
  color: black;
  font-weight: 900;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Title </h3>
  <p> description </p>
</div>

I wanted to make gradient underline using ::after. When there is the only a title, it worked well as my expectation. However, when I add another text below the title, the underline goes to below the added text although I made a rule in ::after. If I don't use gradient underline and add a border-bottom property in h3, there was no problem. So, I guess there is a problem in my ::after, could you fix the problem?

Derek Wang
  • 10,098
  • 4
  • 18
  • 39
Woosung Kim
  • 29
  • 4

2 Answers2

1

Set relative position to the h3 selector so the underline will be placed based on h3 pos.

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  font-family: Georgia;
  font-size: 30px;
  color: black;
  font-weight: 900;
  
  position: relative;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100; right: 0; bottom: 0; left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Title </h3>
  <p> description </p>
</div>
Derek Wang
  • 10,098
  • 4
  • 18
  • 39
0

h3 is missing position relative and so h3::after is not getting a position with reference to h3.

The default position is static for any html element if not specified explicitly.

.thumb-text {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.thumb-text h3 {
  position: relative;
  font-family: Georgia;
  font-size: 30px;
  color: black;
  font-weight: 900;
}

.thumb-text h3::after {
  content: '';
  position: absolute;
  top: 100;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0))
}
<div style="text-align: center;" class="thumb-text">
  <h3> Title </h3>
  <p> description </p>
</div>
Dhruvi Makvana
  • 895
  • 5
  • 17