Question 73986 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How can I make a text underline appear above another element in React? – Reactjs

I’m trying to make an underline of the selected tab be above the horizontal line, something like this:

However, I’m only getting this:

I think using border will not fix the problem, since the more distant of the text I put it, the more the hr tag moves down.

CSS:

.chart-area-tabs .currentTab {
    font-weight: 600;
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
}

JSX:

<div className='chart-area-tabs'>
    <p className="currentTab">Sales (0$)</p>
    <p>Order Volume (0)</p>
    <p>Ticket Size ($0.00)</p>
</div>

<hr style={{width: 870}}/>

How can I correct this code?

Tags:

2

Answers


  1. 0

    You should remove padding/margin around tab items. And then add to each tab padding. After that you will be able to add border-bottom for active tab.example how to add paddings

    Login or Signup to reply.
  2. 0

    Here is a solution using a simple flex-box, padded tabs, and borders instead of an <hr> tag. I don’t think the <hr> is the way to go here, since to get your desired UI you would need to overlap some other element on top of the <hr>, which seems unnecessarily difficult.

    .chart-area-tabs{
  border-radius: 16px 16px 0px 0px;
  border: 1px solid black;
  display: flex;
  width: 700px;
  height: 300px;
  
}

p{
  height: 60px;
  box-sizing: border-box;
  padding: 20px;
  margin: 0px;
  border-bottom: 2px solid lightgrey;
  text-align: center;
}

.filler{
   flex: 1;
}

.currentTab{
  border-bottom: 2px solid black;
}
    <div class="chart-area-tabs">
  <p>
    Sales (0$)
  </p>
  <p class="currentTab">
    Order Volume (0)
  </p>
  <p>
    Ticket Size ($0.00)
  </p>
  <p class="filler">

  </p>
    
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search